window.scrollTo()

2024年5月20日 142次阅读 来源: JS乱弹

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时再详聊。
-->

若有误，请斧正！ 感谢！

    原文作者：JS乱弹
    原文地址: https://segmentfault.com/a/1190000011936743
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞