在移動端，當你快速滑動有滾動條的頁面時，在你手指離開屏幕時，滾動並不會立即停止，而是會隨着“慣性”繼續滑動一段距離。
在做項目的過程中，需要監聽慣性滑動整個過程。在網上並沒有找到相應的監聽事件，於是就自己寫了一個監聽方法。
慣性滾動開始時調用的方法是listenSlidingA，結束時調用的方法是listenSlidingEndA。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>滾動監聽</title> 5 <style type="text/css"> 6 .scoll-x-window{ 7 height: 900px; 8 width: 600px; 9 overflow-x:auto; 10 overflow-y:hidden; 11 border:1px solid black; 12 } 13 .scoll-x-base{ 14 position:relative; 15 height:96%; 16 top:2%; 17 width:4800px; 18 overflow-x:hidden; 19 overflow-y:auto; 20 } 21 .scoll-x-panl{ 22 position:relative; 23 width: 590px; 24 margin-right: 10px; 25 height: 100%; 26 float: left; 27 background-color: orange; 28 } 29 </style> 30 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> 31 <script type="text/javascript"> 32 var pageInfo ={};//頁面數據記錄 33 $(document).on("touchend",".scoll-x-panl",listenSlidingA); 34 35 function listenSlidingA(){ 36 listenSlidingCore("SCOLL_X_WINDOW","listenSlidingEndA()"); 37 } 38 39 /** 40 * 監聽滾動核心事件 41 * windowId：滾動的窗口,callBackFun:回調方法 42 */ 43 function listenSlidingCore(windowId,callBackFun){ 44 pageInfo.scollWidth = $("#" + windowId ).scrollLeft(); 45 //一次滾動只會觸發一次位置糾正，所以要覆蓋掉上一次延時任務 46 clearTimeout(pageInfo.timeoutListener); 47 pageInfo.timeoutListener = setTimeout(function(){ 48 if(pageInfo.scollWidth == $("#" + windowId ).scrollLeft()){ 49 try{ 50 eval(callBackFun); 51 }catch(e){ 52 console.log("出錯了:" + e); 53 } 54 }else{ 55 listenSlidingCore(windowId,callBackFun); 56 } 57 }, 100); 58 } 59 60 function listenSlidingEndA(){ 61 console.log("執行到了回調函數：listenSlidingEndA"); 62 } 63 </script> 64 </head> 65 <body> 66 <div class="scoll-x-window" id="SCOLL_X_WINDOW"> 67 <div class="scoll-x-base" > 68 <div class="scoll-x-panl"></div> 69 <div class="scoll-x-panl"></div> 70 <div class="scoll-x-panl"></div> 71 <div class="scoll-x-panl"></div> 72 <div class="scoll-x-panl"></div> 73 <div class="scoll-x-panl"></div> 74 <div class="scoll-x-panl"></div> 75 <div class="scoll-x-panl"></div> 76 </div> 77 </div> 78 </body> 79 </html>
該方法是實現 面板滾動中的一個步驟，面板滾動的過程是 1：監聽面板的滑動（包括慣性滑動）2：滑動停止后修正面板位置，將最近的面板居中3：高亮底部相應的快捷鏈接。若你有面板滾動中的相關疑問，歡迎留言交流
轉載請注明出處：http://www.cnblogs.com/ttjsndx/p/8251593.html