scrollTo() 无效问题处理

需求：实现访问当前页面直接滚动到最底部
方案：window对象的scrollTo()方法
API介绍：

参数接收一个点（文档坐标），让该点位于左上角。
可选参数为behavior(设置滚动的效果）

错误案例：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{background-color: aquamarine;width: 200px;height: 2000px;}</style></head><body><div>nixx</div><span>云想衣裳花想容，春风拂槛露华浓。

        若非群玉山头见，会向瑶台月下逢。</span><script>// 获取文档的高度和视口的高度let docH = document.documentElement.offsetHeight,
        viewH = window.innerHeight
        // 滚动到文档底部
        window.scrollTo(0,docH - viewH);</script></body></html>

实际效果是并没有发生滚动
在这里插入图片描述

正确的案例：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{background-color: aquamarine;width: 200px;height: 2000px;}</style></head><body><div>nixx</div><span>云想衣裳花想容，春风拂槛露华浓。

        若非群玉山头见，会向瑶台月下逢。</span><script>// 获取文档的高度和视口的高度let docH = document.documentElement.offsetHeight,
        viewH = window.innerHeight
        // 滚动到文档底部setTimeout(()=>{
            window.scrollTo(0,docH - viewH);})</script></body></html>

在这里插入图片描述

问题分析记录：

在这里插入图片描述
直接调用window.scrollTo方法，然后打断点，你会发现已经滚动了

但是当结束断点，又回到了原来的位置
于是猜想着让该方法异步调用，发现成功了

标签：前端 javascript 开发语言

本文转载自: https://blog.csdn.net/Kratial/article/details/128849833
版权归原作者 Kratial 所有，如有侵权，请联系我们删除。

scrollTo() 无效问题处理

发表评论

“scrollTo() 无效问题处理”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航