Question Faites défiler vers le bas de div?


Je crée une conversation en utilisant des requêtes ajax dans les rails et j'essaye d'obtenir un div pour faire défiler vers le bas sans beaucoup de chance.

J'emballe tout dans ce div:

#scroll {
    height:400px;
    overflow:scroll;
}

Y at-il un moyen de le faire défiler vers le bas par défaut en utilisant JS?

Y at-il un moyen de garder le défilement vers le bas après une requête ajax?


619
2017-11-06 22:37


origine


Réponses:


Voici ce que j'utilise sur mon site:

var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;

1015
2017-11-06 22:42



C'est beaucoup plus facile si vous utilisez jQuery:

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

322
2018-04-19 02:17



en utilisant jQuery animer:

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

83
2017-09-12 15:00



Vous pouvez utiliser le code suivant:

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

Pour effectuer un lisse faites défiler, utilisez le code suivant (require jQuery):

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

Voir le échantillon sur JSFiddle

Et c'est comme ça que ça fonctionne:

enter image description here

Ref: scrollTop, scrollHeight, clientHeight


66
2017-10-18 02:27



Version jQuery:

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

Fonctionne à partir de jQuery 1.6

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

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


30
2018-01-10 15:53



Nouvelle méthode:

this.scrollIntoView(false);

18
2017-10-10 07:08



Si vous ne voulez pas compter sur scrollHeight, le code suivant aide:

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

11
2018-06-10 10:58