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

Version imprimable

20/02/2006, 15h14
snoop

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

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...
20/02/2006, 15h24
SpaceFrog

Dans le div2

Code:

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

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

avec mon 2ème div :
Code:

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

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

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

Code:

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>

20/02/2006, 16h29
snoop

super !
Merci beaucoup !
20/02/2006, 18h24
snoop

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
20/02/2006, 19h41
SpaceFrog

8O
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 ...
23/02/2006, 10h53
snoop

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 ...
23/02/2006, 11h04
SpaceFrog

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 ?
23/02/2006, 15h20
snoop

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...
23/02/2006, 15h29
SpaceFrog

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

bon voici un truc un peu alambiqué ...

Code:

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>