我想使用 vanilla JS 滚动到页面底部,但遇到了问题。下面的代码应该滚动到页面底部:
window.scrollTo(0,document.body.scrollHeight);
而它所做的只是在控制台中记录“未定义”。输入中
document.body.scrollHeight
返回整数 736。除此之外,无论我在函数参数中输入什么内容,都不会发生任何事情。更重要的是,它只发生在一个网站上。可能重要(不确定)的是该网站隐藏了其垂直滚动条,即使它有一个非常长的内容列表。
问题可能是您在网站上的实际滚动不是
body
的滚动,而是该主体内另一个元素的滚动。
这是一个例子:
$('#btn1').click(function() {
window.scrollTo(0,document.body.scrollHeight);
});
$('#btn2').click(function() {
el = $('.a')[0];
el.scrollTop = el.scrollHeight;
});
body {
overflow: hidden;
margin: 0;
padding: 0;
}
div.a {
height: 100vh;
overflow: auto;
}
div.b {
height: 1500px;
position: relative;
}
div.c {
position: absolute;
bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
<div class="b">
<button id="btn1">Scroll body - doesn't work</button><br />
<button id="btn2">Scroll element - will work</button>
<div class="c">This is at bottom of page</div>
</div>
</div>
注意 - 使用
只是为了使示例更短。jquery
在页面中放置一些内容,例如将正文高度设置为 1500px,然后尝试执行相同的代码。
document.getElementsByTagName('body')[0].style.display = "block";
无论出于何种原因,将显示更改为“阻止”都可以使用给定的代码启用滚动:
window.scrollTo(0,document.body.scrollHeight);
如果您尝试在浏览器控制台中输入 var a = 5 之类的内容,您也会得到未定义的结果。碰巧你的例子和我的没有返回任何东西。