gpt4 book ai didi

javascript - 自动滚动到div底部

转载 作者:行者123 更新时间:2023-12-03 11:06:58 25 4
gpt4 key购买 nike

在我的网页上,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 数据库加载,我也遇到了同样的问题。

最佳答案

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.使用jquery的JS代码(我不知道非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

关于javascript - 自动滚动到div底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27806268/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com