Position de la scrollbar dans un div

Version imprimable

03/01/2005, 10h57
VolVic

Position de la scrollbar dans un div

Bonjour,

Tout d'abord, puisque c'est la "saison", je vous présente mes meilleurs voeux pour 2005.

Pour ma part, je recommence le boulot en reprenant un "problème" que j'ai rencontré juste avant de partir en congés. Celui-ci avait déjà été traité dans ce forum (http://www.developpez.net/forums/viewtopic.php?t=255051) mais malheureusement les solutions proposées ne m'ont pas permis de résoudre mon souci.
J'ai essayé de relancer le sujet mais comme il était marqué comme résolu personne n'a du y faire attention ... :cry:

Je me permet donc de poser à nouveau ma question.

En gros, pour résumer la situation :

- J'ai dans un formulaire un div dont le contenu (dynamique et potentiellement différent à chaque chargement de la page) dépasse dans certains cas la largeur. Je voudrais positionner la scrollbar qui apparait dans ce cas là pour qu'au chargement de la page ce soit la partie droite du div qui soit visible par exemple.

- mon div est dans le formulaire d'une jsp contenue dans un layout qui est lui même une jsp ... bla bla bla ... Le seul endroit où je peux mettre du spécifique à mon div est la jsp.

- le div est défini comme suit :
<div id="scrollImages" style="overflow-x:scroll">

- juste après la fin du formulaire, j'appelle une fonction javascript qui redimensionne certains div dont 'scrollImages'. Comme j'ai une largeur limite pour mon div, c'est là que le contenu peut parfois être plus large que cette limite.

Le problème, c'est que ma scrollbar est toujours calée à gauche. Je me suis rendu compte que quand je fais un 'alert("scrollWidth : " + document.getElementById('scrollImages').scrollWidth);' dans ma fonction javascript, j'obtiens 0 !!!

Par contre, si je rajoute un bouton
<input type="button" value="scrollWidth" onclick="alert(document.getElementById('scrollImages').scrollWidth)" />
pour voir par la suite la largeur de ma scrollbar, j'obtiens une taille qui ressemble à quelque chose ...

Je ne suis pas un expert en javascript et j'ai un peu du mal à comprendre ce qui se passe.
J'espère donc que vous pourrez m'aider.
Merci d'avance

Si j'ai bien compris, tu veux que ta barre de scroll soit toujours défilée au maximum pour faire apparaître la partie de droite du contenu.
Voici un petit exemple:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <html> <head> <script language="javascript"> function adjustDiv() { var target=document.getElementById('theDiv'); if(!target) return; target.scrollLeft=target.scrollWidth; //Tu mets le scrollLeft au max dans tous les cas } </script> </head> <body onload="adjustDiv()"> <div id="theDiv" style="position:absolute;height:50px;width:100px;overflow:auto"><nobr> une donnée plus large que 100 px </div> </body> </html>
J'ai appelé la fonction adjustDiv au chargement de la page mais tu peux l'appeler quand bon te semblera bien sûr.

03/01/2005, 15h25
VolVic

Merci pour ta réponse.

J'avais pensé à cette solution mais je n'avais pas encore essayé de la mettre en oeuvre car je voulais éviter d'appeler une fonction javascript dans le onload du body.
En effet, je n'ai peut-être pas été très clair dans mon explication mais le body de ma page est dans ce que j'ai appelé le layout qui est générique à toutes les pages de l'appli et je voulais éviter d'avoir à définir une fonction javascript vide dans toutes les jsp venant s'y "insérer" alors que seule l'une d'entre elle nécessite ce traitement spécifique.

Ceci dit, je ne crois pas en fin de compte qu'il y a de solution plus propre.

J'avais trouvé une magouille qui consistait à appeler une fonction de positionnement de la scrollbar à la fin de ma jsp, après celle de redimensionnement, sauf que cette nouvelle fonction était appelé avec un 'settimeout', ce qui "laissait le temps" à la page de s'afficher. Les dimensions du div et de sa scrollwidth étaient alors connues et ça marchait. Mais bon, on est d'accord, c'était pas classe du tout ... :oops:

Bref, tout ça pour dire que j'ai finalement appliqué la méthode "propre" : appel d'une fonction javascript dans le onload et définition de cette fonction dans toutes mes jsp avec du code dedans lorsque celà est nécessaire . Et puis finalement ça pourra peut-être me servir si j'ai besoin de faire du spécifique sur une autre page.

Et donc ça marche comme je le souhaitais.
Merci stephaneey. :D