怎么让移动端列表每次滑动列表都能够有一个指定的固定值?
-----滚轮触发-----
用scrollTop()(带overflow-y: scroll;) 或 margin-top 即可,累加滚动距离。核心代码如下:
$o.bind("mousewheel DOMMouseScroll", function (e) {
e = e.originalEvent;
delta = (e.wheelDelta && (e.wheelDelta > 0 ? 1 : -1)) || // chrome & ie
(e.detail && (e.detail > 0 ? -1 : 1)); // firefox
maxY = $o[0].scrollHeight;
clearTimeout(timer); //清除重复触发的timer
timer = setTimeout(function() {
if (delta > 0) { // 向上
iMWE_ST -= gap;
if (iMWE_ST < 0) iMWE_ST = 0;
} else if (delta < 0) { // 向下
iMWE_ST += gap;
if (iMWE_ST > maxY - gap) iMWE_ST = parseInt(maxY / gap - 1) * gap;
}
$o.stop(true, false).animate({ 'margin-top': -iMWE_ST }, 200);
}, 50);
});
$o就是滚动对象,gap是距离,iMWE_ST是累加长度。
------移动端拖动触发------
移动端则是用ontouchstart、ontouchend来替换mousewheel。
var nSY, nEY, timer,
iMWE_ST = 0, //滚动距离累加
gap = 100; //滚动间距
$o.bind({
touchstart: function (e) {
nSY = e.originalEvent.targetTouches[0].clientY;
return false;
},
touchmove: function(e){
nEY = e.originalEvent.targetTouches[0].clientY;
return false;
},
touchend: function(){
maxY = $o[0].scrollHeight;
clearTimeout(timer); //清除重复触发的timer
timer = setTimeout(function() {
if ((nEY - nSY).toFixed(2) > 0) { // 向上
iMWE_ST -= gap;
if (iMWE_ST < 0) iMWE_ST = 0;
} else { // 向下
iMWE_ST += gap;
if (iMWE_ST > maxY - gap) iMWE_ST = parseInt(maxY / gap - 1) * gap; //这里指定为Y ------
}
$o.stop(true, false).animate({ 'margin-top': -iMWE_ST }, 200);
}, 100);
}
});
$o里只要内容够高就可以,不需要额外样式支持。
监听scroll事件