Прокрутка переполненных DIV с помощью JavaScript
56696 просмотра
6 ответа
У меня есть div, который использует переполнение: auto, чтобы сохранить содержимое внутри div, так как оно изменяется и перетаскивается по странице. Я использую ajax для извлечения строк текста с сервера, а затем добавляю их в конец div, чтобы содержимое росло вниз. Каждый раз, когда это происходит, я хотел бы использовать JS для прокрутки div вниз, чтобы был виден последний добавленный контент, аналогично тому, как будет работать чат или консоль командной строки.
До сих пор я использовал этот фрагмент для этого (я также использую jQuery, отсюда и функцию $ ()):
$("#thediv").scrollTop = $("#thediv").scrollHeight;
Однако это дает мне противоречивые результаты. Иногда это работает, иногда нет, и полностью перестает работать, если пользователь когда-либо изменяет размер div или перемещает полосу прокрутки вручную.
Целевым браузером является Firefox 3, и он разворачивается в контролируемой среде, поэтому ему вообще не нужно работать в IE.
Есть идеи, ребята? Это меня озадачило. Спасибо!
Автор: Bob Somers Источник Размещён: 17.05.2019 02:35Ответы (6)
43 плюса
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
значения содержимого.
29 плюса
6 плюса
Использование цикла для перебора 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;
Автор: Vincent Robert
Размещён: 18.08.2008 12:09
4 плюса
0 плюса
Это можно сделать простым 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).
-1 плюса
У меня был 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 не даст реальных значений высоты содержимого. Надеюсь, это поможет кому-то там!
Автор: ObjectiveTC Размещён: 25.10.2013 08:34Вопросы из категории :
- javascript Как определить, какой из указанных шрифтов был использован на веб-странице?
- javascript Валидация клиентской стороны ASP.Net
- javascript Длина объекта JavaScript
- javascript Получение текста из выпадающего списка
- jquery Прокрутка переполненных DIV с помощью JavaScript
- jquery Экранирование строк HTML с помощью jQuery
- jquery Как сравнить HTML-сущность с JQuery
- jquery Есть ли функция "существует" для jQuery?
- ajax Есть ли какой-нибудь способ для передачи данных с веб-сервера в браузер?
- ajax Как получить результат из модального диалога в JQuery
- ajax Как я могу подавить диалог аутентификации браузера?
- html Определить часовой пояс пользователя
- html Как мне дать моим веб-сайтам значок для iPhone?
- html Как отключить автозаполнение браузера в поле веб-формы / теге ввода?
- scroll Загрузка контента при прокрутке пользователя вниз
- scroll Прокрутите список в WPF в определенную строку
- scroll Проверьте, свободен ли элемент после прокрутки