[div][scrollbar]lier les barres de défilement entre elles

**snoop** · 20/02/2006, 15h14

Bonjour,
J'utilise des div avec des overflow:auto pour faire apparaître des barres de défilement...
Dans une page avec plusieurs div, je voudrais lier le défilement de plusieurs scrollbars (quand je déplace une scrollbar, faire en sorte que l'autre scrollbar se déplace de manière automatique sur un élément que je voudrais lier) : est-ce possible ?

Merci de m'aiguiller...

**SpaceFrog** · 20/02/2006, 15h24

Dans le div2

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div onscroll="this.scrollTop=document.getElementById('div1').scrollTop">

**snoop** · 20/02/2006, 15h59

je viens d'essayer mais ça ne marche pas...

avec mon 2ème div :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<div style="width:790;height:195;overflow:auto;" id="div2" onscroll="this.scrollTop=document.getElementById("div1").scrollTop">

et le 1er div :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<div style="width:395;height:195;overflow:auto;" id="div1">

**SpaceFrog** · 20/02/2006, 16h08

J'ai du me melanger les crayons dans mon premier post :
voici un exemple ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
 
<body>
<div id='div1' style="height:80px;overflow:auto;width:50%;float:left;" onscroll="document.getElementById('div2').scrollTop=this.scrollTop;">
<script type='text.javascript'>
for(i=0; i<50;i++){
					document.write("ligne  " +i+ " \<br\/\>")
					}
</script>
</div>
<div id='div2' style="height:80px;overflow:auto;" >
<script type='text.javascript'>
for(i=0; i<50;i++){
					document.write("ligne  " +i+ " \<br\/\>")
					}
</script>
</div>
</body>
</html>

**snoop** · 20/02/2006, 16h29

super !
Merci beaucoup !

**snoop** · 20/02/2006, 18h24

Encore une petite question...
Est-il possible de positionner le scroll sur une donnée cible lorsque le scroll affiche un élément ? Positionner en fonction de ce qui apparaît à l'écran ?
MErci

**SpaceFrog** · 20/02/2006, 19h41

heu pas tout compris la question ...
afficher quoi ? où ? si quoi ?

là on joue sur le scrollTop
si tu connais la hauteur d'une ligne en pixels ...
ou alors il faut placer des ancres invisibles ...

**snoop** · 23/02/2006, 10h53

je vais essayer d'être plus claire...

j'ai une page avec deux blocs (div avec overfloax:auto...).
Je vaudrais que lorsqu'on déplace le scrollbar du 1er bloc et que une donnée de ce bloc apparaît, le scrollbar du 2ème bloc se positionne sur une donnée que l'on vaudrais voir apparaître...
Je ne sais pas si c'est faisable ...

**SpaceFrog** · 23/02/2006, 11h04

tu veux dire que les deux divs ne peuvent pas être synchronisés car les elements ne sont pas forcément à la même hauteur chacun dans leur div ?

existe-t-il une proportionalité qui te permettrait de dir scroll1 = 1.3*scroll2 ??

sinon je ne sais pas trop si l'on peut detectéer le fais qu'un element arrive en zone visible ?

**snoop** · 23/02/2006, 15h20

voila, c'est ça ...
mais je ne sais pas par avance les proportions... ce serait pour générer quelque chose de dynamique...
Si quelqu'un a une idée pour savoir si c'est faisable...

**SpaceFrog** · 23/02/2006, 15h29

les proportions sont constantes sur tout le div ou peuvent varier d'un element à l'autre . ?

**SpaceFrog** · 23/02/2006, 16h59

bon voici un truc un peu alambiqué ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<html>
<head>
<title>Scrolling uneven divs - jimfraser</title>
<style type="text/css">
div.container {
	width: 300px;
	height: 200px;
	float: left;
	overflow-y: scroll;
}
div.container div {
	height: 200px;
	width: 300px;
	border: 2px solid black;
	background: orange;
	font: 16pt Arial;
}
</style>
<script type="text/javascript">
 
var aHeights = new Array();
var curMD = false;
 
window.onload = storeHeights;
 
function syncDivs(obj) {
	if( obj == curMD ) {	
		var srcArray;
		var dstArray;
		var dstDiv;
		var dstPrefix;
 
		if( obj.id == aHeights[0][0] ) {
			srcArray = aHeights[0][1];
			dstArray = aHeights[1][1];
			dstDiv = document.getElementById(aHeights[1][0]);
			dstPrefix = "item2_";
		} else {
			srcArray = aHeights[1][1];
			dstArray = aHeights[0][1];
			dstDiv = document.getElementById(aHeights[0][0]);
			dstPrefix = "item1_";
		}
 
		var cTop = obj.scrollTop;
		var cTest = 0;
		var lastId = srcArray[0][0];
		var i = 0;
 
		while( cTest < cTop ) {
			if( i == srcArray.length - 1 ) {
				lastId = srcArray[i][0];
			} else {
				lastId = srcArray[i+1][0];
			}
			cTest += srcArray[i][1];
			i++;
		}
 
		document.getElementById(dstPrefix + lastId.split("_")[1]).scrollIntoView(true);
 
	}
}
function storeHeights() {
	aHeights[0] = ["div1", getDivHeights(document.getElementById("div1"))];	
	aHeights[1] = ["div2", getDivHeights(document.getElementById("div2"))];
}
function getDivHeights(div) {
	var heights = [];
	for( var i=0; i < div.getElementsByTagName("DIV").length; i++ ) {
		var thing = div.getElementsByTagName("DIV")[i];
		heights[heights.length] = new Array(thing.id, (thing.currentStyle ? thing.currentStyle.height : getComputedStyle(thing,null).getPropertyValue("height")).replace("px","") - 0 );
	}
 
	return heights;
 
}
</script>
</head>
<body>
<div id="div1" class="container" onmousedown="curMD=this;" onscroll="syncDivs(this);">
	<div id="item1_1">1</div>
	<div id="item1_2">2</div>
	<div id="item1_3">3</div>
	<div id="item1_4">4</div>
	<div id="item1_5">5</div>
	<div id="item1_6">6</div>
</div>
<div id="div2" class="container" onmousedown="curMD=this;" onscroll="syncDivs(this);">
	<div id="item2_3">3</div>
	<div id="item2_2">2</div>
	<div id="item2_1">1</div>
	<div id="item2_5">5</div>
	<div id="item2_6">6</div>
	<div id="item2_4">4</div>
</div>
<div id="debug"></div>
</body>
</html>

[div][scrollbar]lier les barres de défilement entre elles

JavaScript

Discussions similaires

Partager

Partager