手機端下拉觸底事件異常

$(window).scroll(function(){//下拉事件var windowH = $(window).height();//設備可見區域高度var documentH = $('body').height();//整個網頁的高度（包括未顯示的部分）var scrollH = $(document).scrollTop();//滾動條滾動上去的高度if((documentH - windowH - scrollH) == 0 ){getActList();//事件}});

上面是一開始的下拉觸底事件，在web端調試時一切正常，但在手機端調試便出錯，輸出高度信息一看，部分手機內部的srollTop像素不為整，更離譜的是documentH - windowH - scrollH 不一定等于 0 ；但誤差肯定在一像素內所有修改代碼為

var flag = false;//防止多次調用下拉觸發事件 $(window).scroll(function(){//下拉事件var windowH = $(window).height();//設備可見區域高度var documentH = $('body').height();//整個網頁的高度（包括未顯示的部分）var scrollH = $(document).scrollTop();//滾動條滾動上去的高度if((documentH - windowH - scrollH) <= 1 && flag === false){//觸底事件 移動端像素誤差為1像素內，設置半秒內只能觸發一次flag = true;getActList();//事件setTimeout(()=>{flag = false;},500);} });

總結

以上是生活随笔為你收集整理的移动端H5下拉触底事件异常处理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。