原生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("停止滚动!");
});

你可能感兴趣的:(原生js判断手机端页面滚动停止)