Прокрутка переполненных DIVS с помощью JavaScript
-
08-06-2019 - |
Вопрос
У меня есть div, который использует overflow: auto для сохранения содержимого внутри div при изменении его размера и перетаскивании по странице.Я использую некоторый ajax для извлечения строк текста с сервера, затем добавляю их в конец div, поэтому содержимое растет вниз.Каждый раз, когда это происходит, я хотел бы использовать JS для прокрутки div до самого низа, чтобы был виден самый последний добавленный контент, подобно тому, как работает комната чата или консоль командной строки.
До сих пор я использовал этот фрагмент для этого (я также использую jQuery, отсюда функция $()):
$("#thediv").scrollTop = $("#thediv").scrollHeight;
Однако это давало мне противоречивые результаты.Иногда это работает, иногда нет, и оно полностью перестает работать, если пользователь когда-либо изменяет размер div или перемещает полосу прокрутки вручную.
Целевой браузер - Firefox 3, и он развертывается в контролируемой среде, поэтому ему вообще не нужно работать в IE.
Есть какие-нибудь идеи, ребята?Этот вопрос поставил меня в тупик.Спасибо!
Решение
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
достойный контент.
Другие советы
Тот Самый Просмотр прокрутки метод прокручивает элемент в поле зрения.
Использование цикла для перебора 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;
$("#thediv").scrollTop($("#thediv")[0].scrollHeight);
Это можно сделать в простом 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).
У меня был 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 не давал бы реальных значений высоты содержимого.Надеюсь, это кому-то там поможет!