ScrollTop не прокручивается до нижней части, когда данные отображаются много - JQuery

100
14

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

Но, когда визуализированные данные становятся много, тогда полоса прокрутки не подходит к самому дну, а просто остается на том же месте. Только за небольшое количество ударов он прокручивается на дно.

Ниже мой код: -

socket.on("consoleData", function(data) {
$(".log-container ul").append("<li><b>" + data.a + "<b> : " + data.m + "</li>");
$('.log-container').animate({
scrollTop: $('.log-container').height()
}, 500);

});

Как вы можете видеть, когда данные консоли становятся немного большими, полоса прокрутки не перемещается. enter image description here

спросил(а) 2021-01-25T17:41:38+03:00 5 месяцев назад
1
Решение
90

Основная проблема с этим кодом заключается в том, что я взял высоту родительского элемента ie; $('.log-container').height() который равен 328px. С другой стороны, я добавляю элементы li в ul, а не в div.log-container. Которая только увеличивает высоту ul, а ее родительский элемент прокручивает эти элементы. Когда я узнаю высоту ul это было 6000+px, а элемент прокручивался только до 328px.

Итак, теперь они оба работают для меня:

//Method One, using Animate property.

$(".log-container").animate({

scrollTop: $(".log-container ul").height()

}, 800);

//Method Two, using scrollTop()

$(".log-container").scrollTop($(".log-container ul").height());

ответил(а) 2021-01-25T17:41:38+03:00 5 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема