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

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

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

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

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

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

Любые идеи парней? Это меня насторожило. Спасибо!

Ответы

Ответ 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.

Ответ 2

scrollIntoView

Метод scrollIntoView прокручивает элемент в представлении.

Ответ 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;

Ответ 4

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

Ответ 5

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

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

От MDN:

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

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

Ответ 6

У меня была div-упаковка 3 divs, которые плавали влево и содержимое которых изменялось. Это помогает превратить фанк-цветные границы/фон для 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 создавали бы реальные значения высоты контента. Надеюсь, это поможет кому-то там!