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

Question

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

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

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

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

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

Answer 1

small addendum: прокручивается только, если последняя строка уже видна. если прокрутить чуть-чуть, оставляет содержимое там, где оно есть (внимание: не проверено с разными размерами шрифта. это может потребовать некоторых настроек внутри "> = сравнения"):

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;

Answer 2

Так же, как бонусный фрагмент. Я использую angular и пытался прокрутить ветку сообщений до конца, когда пользователь выбирал разные разговоры с пользователями. Чтобы убедиться, что прокрутка работает после того, как новые данные были загружены в div с ng-repeat для сообщений, просто оберните фрагмент прокрутки во время ожидания.

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

Это обеспечит запуск события прокрутки после вставки данных в DOM.

Answer 3

Вы также можете, используя jQuery, прикрепить анимацию к html,body документа с помощью:

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

, что приведет к плавной прокрутке к началу div с идентификатором "div-id".

Answer 4

Я столкнулся с той же проблемой, но с дополнительным ограничением: я не мог контролировать код, добавляющий новые элементы в контейнер прокрутки. Ни один из приведенных здесь примеров не позволил мне сделать именно это. Вот решение, которое я выбрал.

Используется Mutation Observers (https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver), что позволяет использовать его только в современных браузерах (хотя существуют многозаполнения)

Так что в основном код делает именно это:

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});

Я сделал скрипку, чтобы продемонстрировать концепцию: https://jsfiddle.net/j17r4bnk/

Answer 5

Это позволит вам полностью прокручивать страницу относительно высоты документа

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

Answer 6

Java Script:

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

Прокрутка до последней строки содержимого.

Answer 7

плавный прокрутка с Javascript:

document.getElementById('messages').scrollIntoView({ behavior: 'smooth', block: 'end' });

Answer 8

Прокрутите до последнего элемента внутри div:

myDiv.scrollTop = myDiv.lastChild.offsetTop

Answer 9

Очень простой способ для этого - установить scroll to на высоту div.

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

Answer 10

Я знаю, что это старый вопрос, но ни одно из этих решений не сработало для меня. В итоге я использовал offset (). Top, чтобы получить желаемые результаты. Вот что я использовал, чтобы аккуратно прокрутить экран вниз до последнего сообщения в моем приложении чата:

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

Надеюсь, это поможет кому-то еще.