社区脚本中心 → 浏览:帖子主题
* 帖子主题:解决滚动条滚动事件(window.onscroll)产生的窗口抖动问题
pojin (ID: 1)
头衔:论坛坛主
等级:究级天王[荣誉]
积分:414
发帖:45
来自:保密
注册:2022-05-03 21:53:24
造访:2022-11-17 08:42:05
[ 第 1 楼 ] 回复
在使用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);
    }
2022-05-17 17:18:19 IP:已设置保密
分页: 1, 共 1 页
快速回复主题
账号/密码
用户: 没有注册? 密码:
评论内容