Question

在我的网页上，sql结果在div中返回，其中已定义最大宽度和高度，并且溢出已设置为滚动。当有人访问该页面时，我希望默认滚动位置位于底部。我做了很多研究，没有使用jQuery我找到的最佳解决方案无法工作（Scroll to bottom of div?）。因此，我想知道是否有人可以在不使用jQuery的情况下解释我的错误或替代解决方案。

我的代码

<html>
<style>
#test{
max-height: 150px;
max-width: 200px;
overflow: scroll;
background: #50a8ff;    
}
</style>    
<head>
<script language="javascript" type="text/javascript">
 var objDiv = document.getElementById("test");
objDiv.scrollTop = objDiv.scrollHeight;
</script>    
</head>
<body>
<div id="test"><h4>BIG TEXT</h4><h4>BIG TEXT</h4><h4>BIG TEXT</h4><h4>BIG TEXT</h4>
<h4>BIG TEXT</h4><h4>BIG TEXT</h4><h4>BIG TEXT</h4></div>    
</body>
</html>

这是我的代码的简化版本，用于演示此问题。

潜在原因

由于在页面加载后获取SQL数据，因此在填充div之前设置滚动高度，是否会设置延迟来解决此问题？虽然在这个简单的例子中，即使没有从SQL数据库加载数据，我也遇到了同样的问题。

Answer 1

scrollHeight方法并不总是正确的，有时会给出意外的值试试这个

1.在溢出div中添加一个div

 <div class="container which has overflow">
   <div class="inner div with no padding"> // note that this div must not have any padding margins are fine
       MY CONTENT
   </div>
 </div>

2.JS代码与jquery（我不知道非jquery）

 var div = $(".container"); // the div which has the overflow
 var div_inner = $(".container_inner"); //the div inside the overflow one
 var a = div_inner.outerHeight();//get the height of the inner div
 div.scrollTop(a);  // make the overflow fiv scroll to the bottom

自动滚动到div的底部

1 个答案: