zoukankan      html  css  js  c++  java
  • 原生js判断手机端页面滚动停止

    var topValue = 0,// 上次滚动条到顶部的距离  
            interval = null;// 定时器  
            contactsList = document.getElementById("contactsList");
        contactsList.onscroll = function() {  //我项目中的contactsList滚动
            
            if(interval == null) {// 未发起时,启动定时器,1秒1执行  
                interval = setInterval(function () {
                    test();
                }, 1000);  
            }
            topValue = contactsList.scrollTop;  
            
        }  
    
        function test() {  
            //当滚动停止时,两个计算的距离会相同,此时再执行相关操作
            console.log(contactsList.scrollTop,topValue); 
            if(contactsList.scrollTop == topValue) { 
                console.log("ok");
                clearInterval(interval);  
                interval = null;  
            }  
        } 

     使用手机端滚动后,执行相关事件;onscroll是在元素滚动轴滚动时触发的。

    jq mobile的方法,可看下http://www.runoob.com/jquerymobile/jquerymobile-events-scroll.html。

    网址上有非常详细的使用方法。

    scrollstart 事件是在用户开始滚动页面时触发:

    $(document).on("scrollstart",function(){
    alert("开始滚动!");
    });

    scrollstop 事件是在用户停止滚动页面时触发:

    $(document).on("scrollstop",function(){
    alert("停止滚动!");
    });
  • 相关阅读:
    代理模式
    适配器模式
    原型模式
    创建者模式
    装饰模式
    web总结
    4.14
    4.14
    POJ2385
    POJ2229
  • 原文地址:https://www.cnblogs.com/yihan123/p/10418241.html
Copyright © 2011-2022 走看看