My<cod/>.net
Прокрутка переполнена DIVs с JavaScript
У меня есть div, который использует overflow:auto, чтобы сохранить содержимое внутри div, когда оно изменяется и перетаскивается по странице. Я использую некоторые ajax для извлечения строк текста с сервера, а затем добавляю их в конец div, поэтому содержимое растет вниз. Каждый раз, когда это происходит, я хотел бы использовать JS-scroll div снизу, чтобы самый последний добавленный контент был виден, подобно тому, как будет работать чат или консоль командной строки.
До сих пор я использовал этот фрагмент кода, чтобы сделать это (я также использую jQuery, следовательно, функцию $() ):
$("#thediv").scrollTop = $("#thediv").scrollHeight;
Однако это дало мне противоречивые результаты. Иногда это работает, иногда нет, и он полностью перестает работать, если пользователь когда-либо изменяет размер div или перемещает панель scroll вручную.
Целевой браузер-это 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;
});
который установит смещение scroll к последнему значению содержимого clientHeight .
Использование цикла для итерации по jQuery одного элемента довольно неэффективно. При выборе ID вы можете просто получить первый и уникальный элемент 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;
Это можно сделать простым 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-обертки (и кровоточил под областью содержимого под оберткой).
Разрешен с помощью @Shog9's ответа выше. Применительно к моей ситуации это был макет 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').высота будет производить реальные значения содержания-высоты. Надеюсь, это поможет кому-то там!