Gardez le débordement div déroulé vers le bas à moins que l'utilisateur ne se déplace vers le haut

Bien, cela pourrait vous aider:

 var element = document.getElementById("yourDivID"); element.scrollTop = element.scrollHeight; 

[EDIT], pour correspondre au commentaire …

 function updateScroll(){ var element = document.getElementById("yourDivID"); element.scrollTop = element.scrollHeight; } 

Chaque fois que le contenu est ajouté, appelez updateScroll() ou configurez une minuterie:

 //once a second setInterval("updateScroll",1000); 

Si vous souhaitez mettre à jour SEULEMENT si l'utilisateur ne s'est pas déplacé:

 var scrolled = false; function updateScroll(){ if(!scrolled){ var element = document.getElementById("yourDivID"); element.scrollTop = element.scrollHeight; } } $("#yourDivID").on('scroll', function(){ scrolled=true; }); 

Je viens d'implémenter cela et peut-être que vous pouvez utiliser mon approche.

Disons que nous avons le HTML suivant:

 <div id="out" style="overflow:auto"></div> 

Ensuite, nous pouvons vérifier si elle a parcouru le bas avec:

 var out = document.getElementById("out"); // allow 1px inaccuracy by adding 1 var isScrolledToBottom = out.scrollHeight - out.clientHeight <= out.scrollTop + 1; 

ScrollHeight vous donne la hauteur de l'élément, y compris toute zone non visible due au débordement. ClientHeight vous donne la hauteur CSS ou dit d'une autre manière, la hauteur réelle de l'élément. Les deux méthodes renvoient la hauteur sans margin , donc vous ne devez pas vous en soucier. ScrollTop vous donne la position du défilement vertical. 0 est supérieur et max est le scrollHeight de l'élément moins la hauteur de l'élément lui-même. Lors de l'utilisation de la barre de défilement, il peut être difficile (c'était dans Chrome pour moi) d'obtenir la barre de défilement tout en bas vers le bas. J'ai donc jeté une inexactitude de 1px. Donc isScrolledToBottom sera vrai même si la barre de défilement est 1px en bas. Vous pouvez définir ce qui vous intéresse.

Ensuite, il s'agit simplement de configurer le scrollTop de l'élément vers le bas.

 if(isScrolledToBottom) out.scrollTop = out.scrollHeight - out.clientHeight; 

Je vous ai fait un violon pour montrer le concept: http://jsfiddle.net/dotnetCarpenter/KpM5j/

Essaye ça:

 $('#yourDiv').scrollTop($('#yourDiv')[0].scrollHeight); 

Démo de vie: http://jsfiddle.net/KGfG2/

 $('#div1').scrollTop($('#div1')[0].scrollHeight); Or animated: $("#div1").animate({ scrollTop: $('#div1')[0].scrollHeight}, 1000); 

J'ai pu travailler avec CSS uniquement.

L'astuce consiste à utiliser l' display: flex; Et flex-direction: column-reverse;

Le navigateur traite le fond comme son sommet. En supposant que les navigateurs dont vous ciblez le support flex-box , la seule mise en garde est que le balisage doit être dans l'ordre inverse.

Voici un exemple de travail. https://codepen.io/jimbol/pen/YVJzBg

 $('#yourDivID').animate({ scrollTop: $(document).height() }, "slow"); return false; 

Cela calculera la position ScrollTop à partir de la hauteur de #yourDivID à l'aide de la #yourDivID $(document).height() afin que, même si le contenu dynamique est ajouté à la div, le scroller sera toujours en position de bas. J'espère que cela t'aides. Mais il a également un petit bogue, même si on se déplace vers le haut et laisse le pointeur de la souris à partir du scroller, il arrivera automatiquement en position de bas. Si quelqu'un pouvait corriger cela aussi, ce sera bien.

 //Make sure message list is scrolled to the bottom var container = $('#MessageWindowContent')[0]; var containerHeight = container.clientHeight; var contentHeight = container.scrollHeight; container.scrollTop = contentHeight - containerHeight; 

Voici ma version basée sur la réponse de dotnetCarpenter. Mon approche est un jQuery pur et j'ai nommé les variables pour rendre les choses un peu plus claires. Ce qui se passe, c'est si la hauteur du contenu est supérieure à celle du conteneur, on fait défiler la distance supplémentaire vers le bas pour obtenir le résultat souhaité.

Fonctionne dans IE et chrome ..