div上的自动滚动不起作用

Question

I've got a CSS problem that I can't deal with since I'm very bad at it. Here is a fiddle I made to show you the issue. When you click the send button several times you can see that the <div> doesn't autoscroll and that messages are hidden.

I tried something like this:

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

It stills does the same (like in the fiddle).

Answer 1

This happens because your scroll is actually on the Body element

try using this:

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

Example

On the Other Hand You can use your javascript with this css added to your app:

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

Try the following:

JS Fiddle DEMO:

I added:

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

This is just a simple example. Be sure to include the jQuery library. I'm sure there are a more elegant way. Please around a bit

Answer 3

您可以在JavaScript中使用它

 window.scrollTo(300, 500);