`

iScroll 左右滑动的时候,阻止上下滑动e.preventDefault()

 
阅读更多

scroll.js 触屏手机 滚动效果代码库!

很不错的一个框架!不过此框架会阻止浏览器的默认行为,如左右滑动的时候,这个时候会阻止上下滑动

这样对很多文章内容页相对较长的页面显然不适用,修改如下

1:在onBeforeScrollStart: function (e) { e.preventDefault(); }, 修改为onBeforeScrollStart: null,

2:在_move方法里增加

if(newY>=-10 && newY<=10){e.preventDefault();}

3.lockDirection  设置为true

分享到:
评论

相关推荐

    jQuery上下滑动加载刷新插件iscroll.js

    **jQuery上下滑动加载刷新插件iscroll.js详解** 在Web开发中,用户界面的流畅性和交互性至关重要,iscroll.js就是这样一款强大的JavaScript插件,它使得开发者能够轻松实现页面内容的上下滑动加载和刷新功能,极大...

    jquery-iscroll.js鼠标控制ul左右滑动

    当我们将jQuery与iScroll.js结合使用时,可以创建出平滑、响应式的滚动体验,比如在网页上用鼠标或触摸事件控制`&lt;ul&gt;`列表左右滑动。 首先,`jquery-iscroll.js`是将jQuery与iScroll功能整合的一个插件,它允许...

    iscroll的用法一个完整的例子

    - `document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);` 阻止默认的触摸移动事件,这是 `iScroll` 正常工作所必需的。 - `document.addEventListener('DOMContentLoaded', ...

    iscroll.zip

    3. **可配置选项**:iscroll.js提供了丰富的配置参数,如bounceTime(回弹时间)、momentum(动量滚动)、preventDefault(阻止默认事件)等,可以根据项目的具体需求进行定制。 4. **滚动范围控制**:iscroll.js...

    最牛x的滚动插件 – jquery的iscroll插件

    preventDefault: false // 是否阻止默认的滚动行为 }); ``` ### 示例应用场景 1. **新闻列表滚动**:在新闻应用中,iscroll可以实现平滑的列表滚动,同时处理好滚动到底部自动加载更多数据的逻辑。 2. **轮播图*...

    iscroll滑块

    preventDefault: false // 阻止默认的触摸行为 }); ``` 这里,我们创建了一个新的`IScroll`实例,并设置了滑块的滚动方向和其他参数。`preventDefault`选项是可选的,如果你希望浏览器的默认滚动行为被`iscroll`...

    iscroll上拉下滑加载数据效果-wap

    在移动Web开发中,iscroll是一个非常流行的JavaScript库,它提供了平滑的滚动效果,尤其在处理触摸设备上的滚动事件时。在这个场景中,我们看到iscroll被用来实现上拉和下拉加载更多的数据,这在浏览列表或者无限...

    原生js 侧滑删除

    1. 防止默认滚动:在`touchmove`事件中使用`e.preventDefault()`阻止元素的默认滚动行为。 2. 滑动阈值:在`touchend`事件中设定一个滑动阈值,只有超过这个阈值才触发删除提示,防止误触。 3. 兼容性:确保你的代码...

    js实现移动端导航点击自动滑动效果

    6. **优化**:为了改善在PC端模拟的手机屏幕上的滑动体验,阻止`touchmove`事件的默认行为,以防止不必要的卡顿。 7. **回调函数**:`endClickScroll` 是一个可选的回调函数,可以在导航项切换后执行,用于自定义...

    jquery模拟手机触屏上下滚动效果.rar

    本资源“jquery模拟手机触屏上下滚动效果.rar”显然聚焦于使用jQuery来实现移动设备上常见的触屏滑动效果,特别是在手机网页上的上下滚动体验。 在移动设备上,用户通常通过触屏手势进行页面浏览,如滑动来滚动内容...

    拖动页面滑动

    - 使用`event.preventDefault()`阻止页面的默认滚动行为,确保拖动只发生在目标元素上。 5. **边界检测**: - 实现页面滑动时的限制边界,防止元素超出可视窗口范围。这可以通过比较元素的边界和窗口大小来实现。...

    手机触屏滚动切换效果 js

    e.preventDefault(); // 阻止默认的滚动行为 var endY = e.originalEvent.touches[0].pageY; var delta = startY - endY; // 更新内容位置 $(this).scrollTop($(this).scrollTop() - delta); }); }); ``` 4....

    jquerymobile经验小结

    对于需要支持滑动操作的页面,jQuery Mobile 结合 iScroll 可以使页面在移动设备上更加流畅地滚动。 **实现步骤:** 1. **引入必要的 JavaScript 文件:** ```html &lt;script type="text/javascript" src="../js/...

    前端开发常见问题精选(三)

    e.preventDefault(); }); 该方法简洁明了,但是问题来了,浏览器默认下拉是禁掉了,可页面却不能滑动了。因此,该方法只适用于在单屏内能够显示全内容的页面。 2. 使用iScroll.js插件 该方法才是真正要提到的,既可

    touchscroll

    `touchstart`事件在用户手指接触屏幕时触发,`touchmove`在手指在屏幕上滑动时触发,`touchend`则在手指离开屏幕时触发。通过监听这些事件,我们可以捕捉用户的触摸行为并进行相应的页面滚动操作。 2. 滚动事件与...

    Java代码实现微信页面滚动防露底(核心代码)

    - 为了避免在触摸开始时页面出现不必要的滚动或缩放,可以调用 `evt.preventDefault()` 来阻止默认的触摸行为。但在本例中,这个方法被注释掉了,可能是因为开发者已经通过其他方式处理了这些情况。 2. **监听触摸...

Global site tag (gtag.js) - Google Analytics