监听滚动已停止 - Newbie_小白

监听滚动已停止
<!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>
posted on 2017-07-10 09:34 Newbie_小白阅读(358) 评论(0) 编辑收藏举报