时间戳

首页 > 解决方案 > 当呈现的数据很多时，ScrollTop 不会滚动到底部 - Jquery

javascript - 当呈现的数据很多时，ScrollTop 不会滚动到底部 - Jquery

问题描述

我正在开发一个 Web 应用程序，其中有自定义控制台日志，我在其中显示所有消息，以及使用套接字在应用程序中发生的任何事情。每次发生套接字事件时，它都会将一个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);

});

如您所见，当控制台数据变大时，滚动条不会移动。 在此处输入图像描述

标签： javascriptjquery

解决方案

这段代码的基本问题是，我取了父元素的高度，即；$('.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());

推荐阅读