Discussion :

[fabiin]

Bonjour,

Je chercher à positionner la scrollbar d'un div pour qu'un element de celui-ci soit visible (centré serait le mieux).

Code du div :

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
 
<div style="height:200px; overflow:auto" id="grandDiv">
 
<div id="truc10">
     <div id="sousTruc11">
     </div>
     <div id="sousTruc12">
     </div>
</div>
 
<div id="truc20">
     <div id="sousTruc21">
     </div>
     <div id="sousTruc22">
     </div>
</div>
 
<div id="truc30">
</div>
 
<div id="truc40">
</div>
 
</div>

Par exemple, ici, disons que le div "sousTruc22" n'est pas visible directement, il faut utiliser la scrollbar pour y accèder.
Le script que je cherche à faire serait d'utiliser la propriété scrollTop du div "grandDiv" de façon à ce que "sousTruc22" soit visible.

Je suis arrivé à faire quelque chose qui fonctionne des fois, mais cela ne marche que sous IE...
Ce code positionne la scrollbar de façon à ce que l'élément soit sur la première ligne.

Code :

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

1
2
3
4
5
6
7
8
9
10
var obj = document.getElementById("sousTruc22");
var monOffsetTop = obj.offsetTop;
 
while (obj.parentNode.id != "grandDiv") {
      obj = obj.parentNode;	
      monOffsetTop = monOffsetTop + obj.offsetTop;
}
 
var objGrandDiv = document.getElementById("grandDiv");
objGrandDiv.scrollTop = monOffsetTop;

Firefox renvoi le offsetTop relativement au document, si j'ai bien compris, alors que IE par rapport au noeud père...

De plus des fois (par exemple au premier lancement de ce script), IE ne renvoi pas une valeur correcte, par contre ca marche à la deuxième execution...
Je n'ai pas compris pourquoi...

Pensez-vous que ceci peut être réalisable facilement

Pouvez vous m'aider à résoudre ce problème ?

Merci

Fabs

[calitom]

Pourquoi ne pas utiliser des ancres plutot que de positionner a l'aide du scrollTop?

[fabiin]

Ok, ben deux heures dans le vent...

Cela fonctionne parfaitement bien avec les ancres :

Code :

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

window.location = "#sousTruc22"

Merci! :-)

[danyboy85]

Sinon tu avais la possibilité de te tourner vers scrollIntoView() mais je ne sais pas si c'est spécifique IE ou non.

PS : N'oublie pas le tag [Résolu] !

[fabiin]

oui, scrollIntoView marche parfaitement bien, et semble etre standard DOM :

http://developer.mozilla.org/fr/docs...scrollIntoView