Прокрутить до нижней части div?

Question

Я создаю чат, используя ajax-запросы в rails, и пытаюсь получить div для прокрутки до дна без особой удачи.

Я упаковываю все в этот div:

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

Есть ли способ сохранить прокрутку вниз по умолчанию с помощью JS?

Есть ли способ сохранить прокрутку вниз после запроса ajax?

Answer 1

Вот что я использую на своем сайте:

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

Answer 2

Это намного проще, если вы используете jQuery scrollTop :

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

Answer 3

с использованием jQuery animate :

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

Answer 4

Вы можете использовать следующий код:

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

Чтобы выполнить плавную прокрутку с помощью JQuery:

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

См. пример на JSFiddle

И вот как это работает:

Ref: scrollTop , scrollHeight , clientHeight

Answer 5

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

Работает с jQuery 1.6

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

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

Answer 6

Более новый метод, который работает на всех текущих браузерах :

this.scrollIntoView(false);

Answer 7

Если вы не хотите полагаться на scrollHeight, вам поможет следующий код:

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

Answer 8

Используя jQuery, scrollTop используется для установки вертикальной позиции полосы прокрутки для любого данного элемента. есть также хороший плагин jquery scrollTo , используемый для прокрутки с анимацией и различными опциями ( demos )

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

если вы хотите использовать метод анимации jQuery для добавления анимации при прокрутке вниз, проверьте следующий фрагмент:

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

Answer 9

Нашел это действительно полезным, спасибо.

Для пользователей Angular 1.X:

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;

  }
]);

Просто потому, что перенос элементов jQuery по сравнению с элементами HTML DOM немного сбивает с толку angular.

Также для приложения чата было полезно сделать это назначение после того, как ваши чаты были загружены, вам также может понадобиться короткое время ожидания.

Answer 10

Javascript или JQuery:

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

Css:

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