window.scrollTo()

最新推荐文章于 2024-06-29 11:03:00 发布

weixin_34162228

最新推荐文章于 2024-06-29 11:03:00 发布

阅读量805

点赞数

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000011936743

本文探讨了在网页中如何确保每次刷新都能将滚动条自动置底的问题，并提供了两种解决方案：一是利用实验性的scrollRestoration属性；二是使用setTimeout实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

scrollTo方法

工作上遇到了这样的场景，在聊天页面当用户刷新页面时滚动条置底。很简单对吧，大概如下范例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="height: 50000px"></div>
<script>
    scrollTo(0, document.body.offsetHeight)
</script>
</body>
</html>

但时实际上这段代码并不能保证用户的每次刷新都能把滚动条置底，但时问题出在哪里呢？
1、经过多方测试发现，但凡在页面打开之后用户改变了滚动条的位置，之后无论怎么刷新都是无效的。（在此之前是有效的）
2、最终发现是history的scrollRestoration属性在作怪，这是一个实验性属性API，我用chrome浏览器做的测试，其默认为auto

scrollRestoration属性允许Web应用程序在历史导航上显式地设置默认滚动恢复行为,也就是说用来控制是否记录用户的滚动条位置

<script>

    history.scrollRestoration="manual"//将其设置为手动
    scrollTo(0, document.body.offsetHeight)
    
</script>

<!--
    这样就达到了预期效果
    但是前面说了这是实验性API，那有没有更好的办法呢来解决
    方法当然有，如下:
-->

<script>
    
    setTimeout(function () {
        scrollTo(0, document.body.offsetHeight)
    })
    
</script>

<!--
    为什么放定时器里就可以呢？ 等下次聊到setTimeout&setInterval时再详聊。
-->

若有误，请斧正！感谢！