Scroll up d'un div à la génération d'un autre div

**Pymento** · 03/10/2011, 12h04

Bonjour, je vais essayer d'être le plus clair possible, mais ça risque d'être compliqué étant donné que je ne comprend pas vraiment mon problème, c'est pour cela que je fais appel à vous.

Code :

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

1
2
3
4
5
6
 
<div id="1" style="overflow:scroll">
  <li onclick="fct()" />
  <li ... />
  ...
<div>

Voila ma structure à peu près, la fonction fct() doit récupérer selon un bdd d'autres <li> et les afficher à coté dans un nouveau <div id="2" />.(il passe aussi en classe selected)
Mon problème :
quand le nombre d'élément li dépasse sur l'axe des y, la scroll bar se dégrise, parfait, et par contre quand je clique sur un élément en bas le div va se scroller vers le haut tout seul, et uniquement pour les élément générant un nouveau div.

Je cherche un peu partout je n'ai pas de #ANCHOR.

Je reste dispo si vous avez besoin de plus de précision, dites moi si mon problème vous dit quelque chose.

Merci.

**NoSmoking** · 03/10/2011, 23h11

Bonsoir,
vraiment pas saisi, je pense que le mieux est une page simplifiée en ligne et/ou plus de code, pour éventuellement visualiser...rechargement page, Ajax ???

**DDNetweaver** · 04/10/2011, 01h40

Pourquoi t'utilises pas un select sur plusieurs lignes plutot qu'une div avec des li ?

car la c'est pas très conforme html et tu reinventes la roue quand meme.

Un select avec un onchange="fct()" c'est quand même beaucoup plus simple

**Pymento** · 04/10/2011, 08h58

Envoyé par DDNetweaver

Pourquoi t'utilises pas un select sur plusieurs lignes plutot qu'une div avec des li ?

car la c'est pas très conforme html et tu reinventes la roue quand meme.

Un select avec un onchange="fct()" c'est quand même beaucoup plus simple

Je suis entièrement d'accord avec toi, le seul soucis c'est qu'en fait le cahier des charges vient de changer et je peux difficilement niveau temps faire machine arrière au niveau de la génération des mes éléments.

@NoSmoking, je te concède que c'est mal expliqué

Voila le code simplifié qui réagi exactement pareil:

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
<html>
<head />

<body>
<div id="aa">
	<div id= "bb" style="height:50px;overflow-y:scroll;width:100px;">
           <ul>	
                <li onclick="fct();"> 1 </li>
		<li onclick="fct();"> 2 </li>
		<li onclick="fct();"> 3 </li>
		<li onclick="fct();"> 4 </li>
		<li onclick="fct();"> 5 </li>
		<li onclick="fct();"> 6 </li>
		<li onclick="fct();"> 7 </li>
		<li onclick="fct();"> 8 </li>
		<li onclick="fct();"> 9 </li>
		<li onclick="fct();"> 0 </li>
           </ul>
	</div>
</div>
<script>
function fct(){
	document.getElementById('aa').innerHTML += '<div>test</div>';
}
</script>
</body>
</html>

Donc le soucis vient du innerHTML je pense.

**Pymento** · 04/10/2011, 11h23

J'ai trouvé une piste :

Code :

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

document.getElementById(div_id).scrollTop = (document.getElementById(li_id).offsetTop-206);

Ce qui me chagrine c'est que j'ai a utilisé ce 206 que j'ai trouvé je ne sais comment !

en gros scrollTop permet de se positionner à l'intérieur d'un div scrollable, le but étant de récupérer l'offset de l'élément cliqué pour le repositionner après que le innerHTML += 'div' ai fais des siennes. Le soucis c'est que le offsetTop bien que l'élément étant en position relative, me renvoi l 'offset absolut que j'affecte a un offset relatif.
L'offsetTop de ma div est de 196. l'offset heigth d'un li est de 30. Mais impossible de retomber sur le 206 seul param qui fait tout bien réagir.

**SpaceFrog** · 04/10/2011, 11h34

heu des li tout seuls ... ???

il manque ...
enfin quelque chose quoi ...

**NoSmoking** · 04/10/2011, 19h04

Envoyé par Pymento

Donc le soucis vient du innerHTML je pense.

tout juste, il n'y a aucune raison d'avoir à repositionner la div contenue si l'ajout d'un élément se fait de façon "clean" vai le méthodes createElement et autre appendChild

Code :

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

1
2
3
4
5
6
7
function fct(){
  var oDiv  = document.getElementById('aa');
  var oNode = document.createElement('DIV');
  var oTxt  = document.createTextNode('test');
  oNode.appendChild(oTxt);
  oDiv.appendChild( oNode);
}

Méfions nous de innerHTML et de ses effets de bord...

Scroll up d'un div à la génération d'un autre div

JavaScript

Vue hybride

Discussions similaires

Partager

Partager