JS判斷手機端頁面滾動停止

tinyq 發布于2019-08-23 15:25 / 2665人閱讀

摘要：的方法，可看下。網址上有非常詳細的使用方法。事件是在用戶開始滾動頁面時觸發開始滾動事件是在用戶停止滾動頁面時觸發停止滾動

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/jquerym...。
網址上有非常詳細的使用方法。
scrollstart 事件是在用戶開始滾動頁面時觸發：

$(document).on("scrollstart",function(){
alert("開始滾動!");
});

scrollstop 事件是在用戶停止滾動頁面時觸發：

$(document).on("scrollstop",function(){
alert("停止滾動!");
});

云服務器 GPU云服務器 js判斷鼠標滾動 aspnet判斷手機端 asp判斷是否手機端 asp語句判斷手機端

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102026.html

js移動端滑倒頂部加載歷史消息解決方案!

摘要：使用具有回彈效果的滾動當手指從觸摸屏上移開，內容會繼續保持一段時間的滾動效果。繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。最近做了一個語音直播聊天的項目，有一個功能是當沒有直播時，進入房間可以查看歷史消息，滑動到頂部加載之前的歷史消息，我用jquery scroll事件，來判斷是否滾動到頂部，問題來了：首先觸發請求事件之后，prepend插入到當前列表之前，而prepen...

jackwang 2019-08-22 16:13 評論0 收藏0
js移動端滑倒頂部加載歷史消息解決方案!

摘要：使用具有回彈效果的滾動當手指從觸摸屏上移開，內容會繼續保持一段時間的滾動效果。繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。最近做了一個語音直播聊天的項目，有一個功能是當沒有直播時，進入房間可以查看歷史消息，滑動到頂部加載之前的歷史消息，我用jquery scroll事件，來判斷是否滾動到頂部，問題來了：首先觸發請求事件之后，prepend插入到當前列表之前，而prepen...

mingde 2019-08-02 10:09 評論0 收藏0
js移動端滑倒頂部加載歷史消息解決方案!

摘要：使用具有回彈效果的滾動當手指從觸摸屏上移開，內容會繼續保持一段時間的滾動效果。繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。最近做了一個語音直播聊天的項目，有一個功能是當沒有直播時，進入房間可以查看歷史消息，滑動到頂部加載之前的歷史消息，我用jquery scroll事件，來判斷是否滾動到頂部，問題來了：首先觸發請求事件之后，prepend插入到當前列表之前，而prepen...

leejan97 2019-08-30 15:53 評論0 收藏0
H5項目常見問題匯總及解決方案

摘要：解決方案可以解決在手機上點擊事件的延遲的模塊，事件也是為了解決在的延遲問題顯示屏原理及設計方案說明屏是一種具備超高像素密度的液晶屏，同樣大小的屏幕上顯示的像素點由個變為多個，如在同樣帶下的屏幕上，蘋果設備的顯示屏中，像素點個變為個。原文鏈接 - https://github.com/FrontEndRo... H5項目常見問題及注意事項 Meta基礎知識： H5頁面窗口自動調整到設備...

marser 2019-08-20 14:08 評論0 收藏0