解决滚动条滚动事件（window.onscroll）产生的窗口抖动问题

最新推荐文章于 2024-01-15 11:37:35 发布

咸小鱼

最新推荐文章于 2024-01-15 11:37:35 发布

阅读量3.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： # JavaScript 文章标签： javascript window

本文链接：https://blog.youkuaiyun.com/qq_41829332/article/details/109184786

JavaScript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用window.onscroll事件时避免窗口抖动的方法。通过设置setTimeout延时器，确保在滚动事件触发后延迟一段时间再执行代码，有效减少因频繁触发导致的抖动现象。

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

在使用window.onscroll（滚动条滚动事件）时，会产生窗口抖动的情况

解决方法：

可通过setTimeout()方法设置一个延时器，设定一定毫秒后，再执行滚动条滚动事件触发时应该执行的代码。这样一定程度上的避免了窗口抖动。

代码：

/**
*滚动条滑倒底部打印日志：没有更多
*/
var timeOut = null;
window.onscroll = function () {

   // 防止窗口抖动
   if (timeOut) {
       clearTimeout(timeOut);
   }
   timeOut = setTimeout(function () {
       //变量scrollTop是滚动条滚动时，距离顶部的距离
       var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
       //变量windowHeight是可视区的高度
       var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
       //变量scrollHeight是滚动条的总高度
       var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
       //滚动条到底部的条件
       if (scrollTop + windowHeight == scrollHeight) {
           console.log("已经滑到底啦");
       } else {
           console.log("还有数据可以浏览哦");
       }
   }, 500);
}