扫码关注官方订阅号
怎么让移动端列表每次滑动列表都能够有一个指定的固定值?
走同样的路,发现不同的人生
监听scroll事件
-----滚轮触发-----用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里只要内容够高就可以,不需要额外样式支持。
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
监听scroll事件
-----滚轮触发-----
用scrollTop()(带overflow-y: scroll;) 或 margin-top 即可,累加滚动距离。核心代码如下:
$o就是滚动对象,gap是距离,iMWE_ST是累加长度。
------移动端拖动触发------
移动端则是用ontouchstart、ontouchend来替换mousewheel。
$o里只要内容够高就可以,不需要额外样式支持。