Прокрутка переполненных DIVS с помощью JavaScript

Question

У меня есть div, который использует overflow: auto для сохранения содержимого внутри div при изменении его размера и перетаскивании по странице.Я использую некоторый ajax для извлечения строк текста с сервера, затем добавляю их в конец div, поэтому содержимое растет вниз.Каждый раз, когда это происходит, я хотел бы использовать JS для прокрутки div до самого низа, чтобы был виден самый последний добавленный контент, подобно тому, как работает комната чата или консоль командной строки.

До сих пор я использовал этот фрагмент для этого (я также использую jQuery, отсюда функция $()):

$("#thediv").scrollTop = $("#thediv").scrollHeight;

Однако это давало мне противоречивые результаты.Иногда это работает, иногда нет, и оно полностью перестает работать, если пользователь когда-либо изменяет размер div или перемещает полосу прокрутки вручную.

Целевой браузер - Firefox 3, и он развертывается в контролируемой среде, поэтому ему вообще не нужно работать в IE.

Есть какие-нибудь идеи, ребята?Этот вопрос поставил меня в тупик.Спасибо!

Answer 1

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

Итак, вы действительно хотите (все еще используя jQuery):

$("#thediv").each( function() 
{
   // certain browsers have a bug such that scrollHeight is too small
   // when content does not fill the client area of the element
   var scrollHeight = Math.max(this.scrollHeight, this.clientHeight);
   this.scrollTop = scrollHeight - this.clientHeight;
});

...который установит смещение прокрутки на последнее clientHeight достойный контент.

Answer 2

scrollIntoView

Тот Самый Просмотр прокрутки метод прокручивает элемент в поле зрения.

Answer 3

Использование цикла для перебора jQuery одного элемента довольно неэффективно.При выборе идентификатора вы можете просто получить первый и уникальный элемент jQuery, используя функцию get() или обозначение [].

var div = $("#thediv")[0];

// certain browsers have a bug such that scrollHeight is too small
// when content does not fill the client area of the element
var scrollHeight = Math.max(div.scrollHeight, div.clientHeight);
div.scrollTop = scrollHeight - div.clientHeight;

Answer 4

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

Answer 5

Это можно сделать в простом JS.Хитрость заключается в том, чтобы установить scrollTop равным или большим, чем общая высота элемента (scrollHeight):

const theDiv = document.querySelector('#thediv');
theDiv.scrollTop = Math.pow(10, 10);

От MDN:

Если установлено значение, превышающее максимально доступное для элемента, scrollTop устанавливается на максимальное значение.

В то время как значение Math.pow(10, 10) проделал этот трюк, используя слишком высокое значение, например Infintiy или Number.MAX_VALUE сбросит scrollTop на 0 (Firefox 66).

Answer 6

У меня был div, содержащий 3 div, которые были плавающими слева, и размер содержимого которых изменялся.Это помогает включить границы / фон необычного цвета для div-оболочки, когда вы пытаетесь решить эту проблему.Проблема заключалась в том, что измененный размер div-содержимого был переполнен за пределами div-оболочки (и просачивался под область содержимого под оболочкой).

Решается с помощью ответа @Shog9 выше.Применительно к моей ситуации это был HTML-макет:

<div id="div-wrapper">
  <div class="left-div"></div>
  <div id="div-content" class="middle-div">
  Some short/sweet content that will be elongated by Jquery.
  </div>
  <div class="right-div"></div>
</div>

Это был мой jQuery для изменения размера div-оболочки:

<script>
$("#div-content").text("a very long string of text that will overflow beyond the width/height of the div-content");
//now I need to resize the div...
var contentHeight = $('#div-content').prop('scrollHeight')
$("#div-wrapper").height(contentHeight);
</script>

Следует отметить, что $('#div-content').prop('scrollHeight') выдает высоту, до которой оболочке необходимо изменить размер.Кроме того, я не знаю ни о каком другом способе получения scrollHeight фактической функции jQuery;Ни один из $('#div-content').scrollTop() и $('#div-content').height не давал бы реальных значений высоты содержимого.Надеюсь, это кому-то там поможет!