Question

我遇到了一个我无法处理的CSS问题，因为我非常糟糕。 Here is a fiddle我向你展示了这个问题。当您多次单击“发送”按钮时，您可以看到<div>没有自动滚动并且隐藏了这些消息。

我试过这样的事情：

var objDiv = document.getElementById("mainblock");
objDiv.scrollTop = objDiv.scrollHeight;

它仍然是一样的（就像在小提琴中一样）。

Answer 1

这是因为您的滚动实际上在Body元素

上

尝试使用：

var objDiv = document.getElementsByTagName("body")[0];    
objDiv.scrollTop = objDiv.scrollHeight;

Example

另一方面您可以将此jss添加到您的应用中使用您的javascript：

html,body {
  height: 100%;
   overflow-y:hidden;
}

.container {
  padding: 40px 20px;
  margin: 0 auto;
  max-width: 100%;
  overflow-y:auto;
    max-height: calc(100% - 150px);
}

Example2

Answer 2

尝试以下方法：

JS Fiddle DEMO:

我补充说：

$("html, body").animate({ scrollTop: 5000 }, 2000);

这只是一个简单的例子。一定要包含jQuery库。我敢肯定有更优雅的方式。请稍等一下

Answer 3

您可以在JavaScript中使用此功能

 window.scrollTo(300, 500);

div上的自动滚动功能不起作用

3 个答案: