监听滚动已停止

最新推荐文章于 2024-06-25 09:29:12 发布

转载最新推荐文章于 2024-06-25 09:29:12 发布 · 164 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/theWayToAce/p/7144331.html

本文介绍了一种使用JavaScript监听网页滚动并判断滚动是否停止的方法，通过设置定时器来检测滚动位置的变化，实现对页面滚动状态的精确捕捉。

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1" />
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link rel="stylesheet" type="text/css" href="css/font/iconfont.css">

</head>
<body>
    <div class="scroller-wrap" style="width:100%;height: 1900px;border: 1px red solid;">

    </div>
    <script>
        var isStopScroolTimer=null;
        var topValue=null;
        //获取滚动高度
        function getScrollTop()
        {
            var scrollTop=0;
            if(document.documentElement&&document.documentElement.scrollTop)
            {
                scrollTop=document.documentElement.scrollTop;
            }
            else if(document.body)
            {
                scrollTop=document.body.scrollTop;
            }
            return scrollTop;
        }
        document.onscroll=function(){   
            if(isStopScroolTimer == null) {
                isStopScroolTimer = setInterval("isStopScrool()", 100);  
            } 
        };

        function isStopScrool() {  
            // 判断此刻到顶部的距离是否和1秒前的距离相等  
            if(getScrollTop() == topValue) {   
                console.log('滑动结束'+getScrollTop());
                clearInterval(isStopScroolTimer);
                isStopScroolTimer=null;
            } else {
              topValue = getScrollTop();
          }
      } 
  </script>
</body>
</html>