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

Question

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

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

Я оборачиваю все в этом div:

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

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

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

1072

javascript html ajax chat

Источник

user10258 06 ноя '08 в 22:37

35 ответов

Решение

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

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

388

Источник

user319963 19 апр '10 в 02:17

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

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

187

Источник

user875775 18 окт '15 в 02:27

Используя jQuery animate:

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

98

Источник

user1354106 12 сен '12 в 15:00

Более новый метод:

this.scrollIntoView(false);

71

Источник

user913620 10 окт '14 в 07:08

альтернативное решение

      function scrollToBottom(element) {
  element.scroll({ top: element.scrollHeight, behavior: 'smooth' });
}

40

Источник

user3986712 19 дек '20 в 18:06

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

Работает с JQuery 1.6

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

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

39

Источник

user475876 10 янв '14 в 15:53

плавная прокрутка с помощью Javascript:

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

38

Источник

user1112483 29 апр '19 в 11:57

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

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

15

Источник

user451634 10 июн '14 в 10:58

Мой сценарий: у меня был список строк, в который мне нужно было добавить строку, заданную пользователем, и автоматически прокрутить до конца списка. У меня была фиксированная высота отображения списка, после чего он должен переполняться.

Я попробовал ответить @Jeremy Ruten, он сработал, но прокручивался до (n-1) -го элемента. Если кто-то сталкивается с этой проблемой, вы можете использоватьsetTimeOut()способ обходного пути. Вам необходимо изменить код, как показано ниже:

setTimeout(() => {
    var objDiv = document.getElementById('div_id');
    objDiv.scrollTop = objDiv.scrollHeight
}, 0)

Вот созданная мной ссылка StcakBlitz, в которой показана проблема и ее решение: https://stackblitz.com/edit/angular-ivy-x9esw8

12

Источник

user6635464 10 май '20 в 21:46

Метод, не требующий JavaScript (2023 г.)

Вот метод, который вообще не требует никакого JavaScript и использует чистый (Flexbox) CSS. Более подробно этот метод я объяснил здесь.

Хитрость заключается в том, чтобы поместить элементы в элемент «content», который заключен внутри элемента.column-reverseэлемент flexbox, который действует как «прокрутка». Поскольку элементы находятся в другом контейнере («контент»), они не «переворачиваются», а всегда выстраиваются в линию внизу. Фактически, это заставляет скроллер прокручиваться вниз всякий раз, когда что-то добавляется.

Преимущества этого метода

Помимо отсутствия использования JavaScript, большим преимуществом этого метода является то, что, когда пользователь начинает прокручивать список, позиция прокрутки остается фиксированной до той точки, до которой пользователь прокрутил. Это предотвращает раздражающее перескакивание содержимого при добавлении новых элементов. Как только пользователь снова прокрутит страницу вниз, список останется прокрученным вниз при обновлении.

Демо

Примечание. JavaScript в приведенной ниже демонстрации требуется только для самой демонстрации (чтобы добавить элементы в список и посмотреть, что произойдет).

11

Источник

user1175739 20 мар '23 в 10:22

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

11

Источник

user2394994 19 апр '22 в 19:36

Java Script:

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

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

10

Источник

user6801721 24 окт '17 в 16:25

Вы можете использовать метод scrollIntoView HTML DOM следующим образом:

var element = document.getElementById("scroll");
element.scrollIntoView();

8

Источник

user11804213 09 мар '20 в 21:58

Javascript или JQuery:

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

Css:

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

7

Источник

user4466122 18 июл '16 в 18:44

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

//get the div that contains all the messages
let div = document.getElementById('message-container');

//make the last element (a message) to scroll into view, smoothly!
div.lastElementChild.scrollIntoView({ behavior: 'smooth' });

6

Источник

user763546 08 июл '20 в 10:48

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

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

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

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

6

Источник

user1334561 19 ноя '14 в 19:40

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

Для пользователей 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.

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

6

Источник

user4736349 15 сен '15 в 17:56

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

Оно использует 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/

5

Источник

user1348531 09 окт '15 в 06:59

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

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

4

Источник

user4255204 13 авг '15 в 03:41

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;

4

Источник

user1557690 03 июл '14 в 13:58

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

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

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

4

Источник

user1351403 28 окт '15 в 18:17

Вы можете использовать метод Element.scrollTo().

Его можно анимировать с помощью встроенной анимации браузера / ОС, так что он очень плавный.

         function scrollToBottom() {
    const scrollContainer = document.getElementById('container');
    scrollContainer.scrollTo({
        top: scrollContainer.scrollHeight,
        left: 0,
        behavior: 'smooth'
    });
}

// initialize dummy content
const scrollContainer = document.getElementById('container');
const numCards = 100;
let contentInnerHtml = '';
for (let i=0; i<numCards; i++) {
  contentInnerHtml += `<div class="card mb-2"><div class="card-body">Card ${i + 1}</div></div>`;
}
scrollContainer.innerHTML = contentInnerHtml;

         .overflow-y-scroll {
  overflow-y: scroll;
}

         <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="d-flex flex-column vh-100">
  <div id="container" class="overflow-y-scroll flex-grow-1"></div>
  <div>
    <button class="btn btn-primary" onclick="scrollToBottom()">Scroll to bottom</button>
  </div>
</div>

4

Источник

user5671180 05 ноя '20 в 20:02

Почему бы не использовать для этого простой CSS?

Хитрость заключается в использовании display: flex; и flex-direction: column-reverse;

      Here is a working example. https://codepen.io/jimbol/pen/YVJzBg

4

Источник

user3964056 06 май '22 в 05:17

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

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

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

4

Источник

user1863795 21 авг '14 в 12:41

Только css:

      .scroll-container {
  overflow-anchor: none;
}

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

3

Источник

user8723748 30 июл '21 в 07:24

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

myDiv.scrollTop = myDiv.lastChild.offsetTop

2

Источник

user1857487 03 фев '19 в 08:50

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

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

1

Источник

user8532064 26 окт '17 в 15:56

В моем приложении Angular 6 я только что сделал это:

postMessage() {
  // post functions here
  let history = document.getElementById('history')
  let interval    
  interval = setInterval(function() {
    history.scrollTop = history.scrollHeight
    clearInterval(interval)
  }, 1)
}

Функция clearInterval(interval) остановит таймер, чтобы разрешить ручную прокрутку вверх / вниз.

1

Источник

user1202416 17 фев '20 в 03:21

Я использую разницу между координатой Y первого элемента div и координатой Y выбранного элемента div. Вот код JavaScript/JQuery и html:

         function scrollTo(event){
        // In my proof of concept, I had a few <button>s with value 
        // attributes containing strings with id selector expressions
        // like "#item1".
        let selectItem = $($(event.target).attr('value'));
        let selectedDivTop = selectItem.offset().top;

        let scrollingDiv = selectItem.parent();

        let firstItem = scrollingDiv.children('div').first();
        let firstItemTop = firstItem.offset().top;

        let newScrollValue = selectedDivTop - firstItemTop;
        scrollingDiv.scrollTop(newScrollValue);
    }

         <div id="scrolling" style="height: 2rem; overflow-y: scroll">
  <div id="item1">One</div>
  <div id="item2">Two</div>
  <div id="item3">Three</div>
  <div id="item4">Four</div>
  <div id="item5">Five</div>
</div>

1

Источник

user3335674 06 окт '20 в 20:11

Другие вопросы по тегам javascript html ajax chat

user813 06 ноя '08 в 22:42 2008-11-06 22:42 · Accepted Answer · 2008-11-06 22:42

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

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

1732

Источник

user813 06 ноя '08 в 22:42