Faire défiler vers le bas de div?

je crée un chat en utilisant les requêtes ajax dans les rails et j'essaie d'obtenir un div pour faire défiler vers le bas sans beaucoup de chance.

je suis emballage de tout dans ce div:

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

y a-t-il un moyen par défaut de le faire glisser vers le bas en utilisant JS?

est-ce qu'il y a un moyen de le laisser filer vers le bas après une demande ajax?

632
demandé sur sudo bangbang 2008-11-07 01:37:30
la source

18 ответов

voici ce que j'utilise sur mon site:

var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;
1038
répondu Jeremy Ruten 2018-07-19 11:21:53
la source

C'est beaucoup plus facile si vous utilisez jQuery:

$("#mydiv").scrollTop($("#mydiv")[0].scrollHeight);
324
répondu andsien 2011-09-23 06:29:22
la source

utilisant jQuery animate :

$('#DebugContainer').stop().animate({
  scrollTop: $('#DebugContainer')[0].scrollHeight
}, 800);
83
répondu DadViegas 2016-03-17 00:08:47
la source

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:

enter image description here

Réf: scrollTop , scrollHeight , clientHeight

70
répondu ThoQ 2017-02-25 06:36:12
la source
var mydiv = $("#scroll");
mydiv.scrollTop(mydiv.prop("scrollHeight"));

oeuvres de jQuery 1.6

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

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

29
répondu Akira Yamamoto 2018-09-13 03:41:09
la source

nouvelle méthode:

this.scrollIntoView(false);
19
répondu tnt-rox 2016-08-03 15:33:30
la source

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

$('#scroll').scrollTop(1000000);
10
répondu Benny Neugebauer 2014-06-10 14:58:00
la source

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);
6
répondu msoliman 2015-06-21 12:22:20
la source

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.

6
répondu devonj 2018-03-09 04:02:18
la source

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;
4
répondu Bruno Jennrich 2014-07-03 17:58:01
la source

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.

4
répondu mylescc 2014-08-21 16:41:38
la source

Javascript ou jquery:

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

Css:

 .messages
 {
      height: 100%;
      overflow: auto;
  }
4
répondu Lay Leangsros 2016-07-18 21:44:25
la source

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);
3
répondu Navaneeth 2015-08-13 06:41:29
la source

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".

3
répondu John Dunne 2015-10-28 21:17:07
la source

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 /

2
répondu Benkinass 2015-10-09 10:08:01
la source

Java Script:

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

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

1
répondu Barath 2017-10-24 19:25:50
la source

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);
1
répondu Cubetastic 2017-10-26 18:56:16
la source

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.

0
répondu BrianLegg 2016-12-12 23:09:43
la source

Autres questions sur javascript ajax html