如何阻止IOS触摸滚动效果--“橡皮筋效果”?

    技术2022-07-21  112

    浏览器在移动端有一个默认触摸滚动的效果,下拉时自带橡皮筋的效果。在开发的时候我们经常需要阻止此效果。 解决方案:

    document.body.addEventListener('touchmove', function(e) { if (e._isScroller) return; e.preventDefault();//阻止默认的处理方式(阻止下拉滑动的效果) }, { passive: false });//passive 参数不能省略,用来兼容ios和android

    如果不加passive:false,在 ios 上是不能起作用的。

    浏览器内核介绍:

    Chrome 默认的事件监听参数:

    useCapture:false 表示事件采用冒泡机制(capture 译为 捕获),浏览器默认就是false; passive:false表示我现在主动告诉浏览器该监听器将使用e.preventDefault()来阻止浏览器默认的滚动行为(可以提高运行速度)。

    Safari 默认的事件监听参数: 在 Safari 中,有一个更新:

    Updated root document touch event listeners to use passive mode improving scrolling performance and reducing crashes 更新了根文档触摸事件侦听器,默认使用passive:true提高滚动性能并减少崩溃

    所以Safari 中默认使用了passive:true,告诉浏览器,此监听事件中,不会阻止默认的页面滚动。这将导致设置的e.preventDefault()代码失效。

    所以 Safari 默认是不会阻止滚动的。

    结论 我们通过e.preventDefault();阻止默认的下拉滑动的效果,通过添加passive:false 参数来兼容各个浏览器。即可实现阻止移动页面滚动的功能。

    参考文章:添加链接描述

    Processed: 0.010, SQL: 9