移动端H5页面惯性滑动监听
在移动端，当你快速滑动有滚动条的页面时，在你手指离开屏幕时，滚动并不会立即停止，而是会随着“惯性”继续滑动一段距离。
在做项目的过程中，需要监听惯性滑动整个过程。在网上并没有找到相应的监听事件，于是就自己写了一个监听方法。
惯性滚动开始时调用的方法是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
