Faire défiler vers le bas de div?

C'est beaucoup plus facile si vous utilisez jQuery:

$("#mydiv").scrollTop($("#mydiv")[0].scrollHeight);

utilisant jQuery animate :

$('#DebugContainer').stop().animate({
  scrollTop: $('#DebugContainer')[0].scrollHeight
}, 800);

vous pouvez utiliser le code suivant:

function scrollToBottom(id){
   var div = document.getElementById(id);
   div.scrollTop = div.scrollHeight - div.clientHeight;
}

pour effectuer un smooth scroll, utilisez le code suivant (require jQuery):

function scrollSmoothToBottom (id) {
   var div = document.getElementById(id);
   $('#' + id).animate({
      scrollTop: div.scrollHeight - div.clientHeight
   }, 500);
}

voir échantillon sur JSFiddle

et c'est comme ça que ça marche:

Réf: scrollTop , scrollHeight , clientHeight

var mydiv = $("#scroll");
mydiv.scrollTop(mydiv.prop("scrollHeight"));

oeuvres de jQuery 1.6

https://api.jquery.com/scrollTop /

http://api.jquery.com/prop /

nouvelle méthode:

this.scrollIntoView(false);

si vous ne voulez pas vous fier à scrollHeight , le code suivant aide:

$('#scroll').scrollTop(1000000);

utilisant jQuery, scrollTop est utilisé pour régler la position verticale de la barre de contrôle pour un élément donné. Il ya aussi un beau jQuery scrollTo plugin utilisé pour faire défiler avec l'animation et les différentes options ( démos )

var myDiv = $("#div_id").get(0);
myDiv.scrollTop = myDiv.scrollHeight;

si vous voulez utiliser la méthode animate de jQuery pour ajouter l'animation en défilant, cochez la case suivante:

var myDiv = $("#div_id").get(0);
myDiv.animate({
    scrollTop: myDiv.scrollHeight
  }, 500);

a trouvé ça très utile, merci.

pour L'Angle 1.X des gens là-bas:

angular.module('myApp').controller('myController', ['$scope', '$document',
  function($scope, $document) {

    var overflowScrollElement = $document[0].getElementById('your_overflow_scroll_div');
    overflowScrollElement[0].scrollTop = overflowScrollElement[0].scrollHeight;

  }
]);

juste parce que l'emballage en jQuery elements versus HTML DOM elements devient un peu confus avec angular.

aussi pour une application de chat, j'ai trouvé faire cette tâche après que vos chats ont été chargés pour être utile, vous pourriez également avoir besoin de mettre sur court délai ainsi.

petit additif: rouleaux seulement, si la dernière ligne est déjà visible. si défile un tout petit peu, quitte le contenu où il est (attention: pas testé avec différentes tailles de police. cela peut nécessiter quelques ajustements à l'intérieur " > comparaison="):

var objDiv = document.getElementById(id);
var doScroll=objDiv.scrollTop>=(objDiv.scrollHeight-objDiv.clientHeight);                   

// add new content to div
$('#' + id ).append("new line at end<br>"); // this is jquery!

// doScroll is true, if we the bottom line is already visible
if( doScroll) objDiv.scrollTop = objDiv.scrollHeight;

comme un Bonus. J'utilise angular et j'ai essayé de faire défiler un fil de message vers le bas quand un utilisateur a sélectionné différentes conversations avec les utilisateurs. Afin de s'assurer que le scroll fonctionne après que les nouvelles données ont été chargées dans le div avec le ng-repeat pour les messages, il suffit d'envelopper le fragment de scroll dans un timeout.

$timeout(function(){
    var messageThread = document.getElementById('message-thread-div-id');
    messageThread.scrollTop = messageThread.scrollHeight;
},0)

qui s'assure que l'événement de défilement est déclenché après que les données ont été insérées dans le DOM.

Javascript ou jquery:

var scroll = document.getElementById('messages');
   scroll.scrollTop = scroll.scrollHeight;
   scroll.animate({scrollTop: scroll.scrollHeight});

Css:

 .messages
 {
      height: 100%;
      overflow: auto;
  }

cela vous permettra de faire défiler tout le chemin vers le bas en ce qui concerne la hauteur du document

$('html, body').animate({scrollTop:$(document).height()}, 1000);

vous pouvez aussi, en utilisant jQuery, joindre une animation à html,body du document via:

$("html,body").animate({scrollTop:$("#div-id")[0].offsetTop}, 1000);

ce qui donnera un scroll en douceur vers le haut de la div avec l'id"div-id".

j'ai rencontré le même problème, mais avec une contrainte supplémentaire: je n'avais aucun contrôle sur le code qui a ajouté de nouveaux éléments au conteneur. Aucun des exemples que j'ai trouvé ici m'a permis de le faire. Voici la solution que j'ai fini avec .

il utilise Mutation Observers ( https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver ) qui le rend utilisable uniquement sur les navigateurs modernes (bien qu'il existe des polyfills)

donc fondamentalement le code fait exactement cela:

var scrollContainer = document.getElementById("myId");

// Define the Mutation Observer
var observer = new MutationObserver(function(mutations) {

  // Compute sum of the heights of added Nodes
  var newNodesHeight = mutations.reduce(function(sum, mutation) {
      return sum + [].slice.call(mutation.addedNodes)
        .map(function (node) { return node.scrollHeight || 0; })
        .reduce(function(sum, height) {return sum + height});
  }, 0);

  // Scroll to bottom if it was already scrolled to bottom
  if (scrollContainer.clientHeight + scrollContainer.scrollTop + newNodesHeight + 10 >= scrollContainer.scrollHeight) {
    scrollContainer.scrollTop = scrollContainer.scrollHeight;
  }

});

// Observe the DOM Element
observer.observe(scrollContainer, {childList: true});

j'ai fait un violon pour démontrer le concept : https://jsfiddle.net/j17r4bnk /

Java Script:

document.getElementById('messages').scrollIntoView(false);

Défile jusqu'à la dernière ligne du contenu présent.

une méthode très simple à cela est de mettre le scroll to à la hauteur de la div.

var myDiv = document.getElementById("myDiv");
window.scrollTo(0, myDiv.innerHeight);

je sais que c'est une vieille question, mais aucune de ces solutions n'a fonctionné pour moi. J'ai fini par utiliser offset().haut pour obtenir les résultats souhaités. Voici ce que j'ai utilisé pour doucement faire défiler l'écran vers le bas au dernier message dans mon application de chat:

$("#html, body").stop().animate({
     scrollTop: $("#last-message").offset().top
}, 2000);

j'espère que cela aide quelqu'un d'autre.