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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM