在移动端，当你快速滑动有滚动条的页面时，在你手指离开屏幕时，滚动并不会立即停止，而是会随着“惯性”继续滑动一段距离。
在做项目的过程中，需要监听惯性滑动整个过程。在网上并没有找到相应的监听事件，于是就自己写了一个监听方法。
惯性滚动开始时调用的方法是listenSlidingA，结束时调用的方法是listenSlidingEndA。
<!DOCTYPE html>
<html>
<head>
<title>滚动监听</title>
<style type="text/css">
.scoll-x-window{
height: 900px;
width: 600px;
overflow-x:auto;
overflow-y:hidden;
border:1px solid black;
}
.scoll-x-base{
position:relative;
height:96%;
top:2%;
width:4800px;
overflow-x:hidden;
overflow-y:auto;
}
.scoll-x-panl{
position:relative;
width: 590px;
margin-right: 10px;
height: 100%;
float: left;
background-color: orange;
}
</style>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
var pageInfo ={};//页面数据记录
$(document).on("touchend",".scoll-x-panl",listenSlidingA); function listenSlidingA(){
listenSlidingCore("SCOLL_X_WINDOW","listenSlidingEndA()");
} /**
* 监听滚动核心事件
* windowId：滚动的窗口,callBackFun:回调方法
*/
function listenSlidingCore(windowId,callBackFun){
pageInfo.scollWidth = $("#" + windowId ).scrollLeft();
//一次滚动只会触发一次位置纠正，所以要覆盖掉上一次延时任务
clearTimeout(pageInfo.timeoutListener);
pageInfo.timeoutListener = setTimeout(function(){
if(pageInfo.scollWidth == $("#" + windowId ).scrollLeft()){
try{
eval(callBackFun);
}catch(e){
console.log("出错了:" + e);
}
}else{
listenSlidingCore(windowId,callBackFun);
}
}, 100);
} function listenSlidingEndA(){
console.log("执行到了回调函数：listenSlidingEndA");
}
</script>
</head>
<body>
<div class="scoll-x-window" id="SCOLL_X_WINDOW">
<div class="scoll-x-base" >
<div class="scoll-x-panl"></div>
<div class="scoll-x-panl"></div>
<div class="scoll-x-panl"></div>
<div class="scoll-x-panl"></div>
<div class="scoll-x-panl"></div>
<div class="scoll-x-panl"></div>
<div class="scoll-x-panl"></div>
<div class="scoll-x-panl"></div>
</div>
</div>
</body>
</html>
该方法是实现 面板滚动中的一个步骤，面板滚动的过程是 1：监听面板的滑动（包括惯性滑动）2：滑动停止后修正面板位置，将最近的面板居中3：高亮底部相应的快捷链接。若你有面板滚动中的相关疑问，欢迎留言交流