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

亦凉 2023-02-22 08:22 20阅读 0赞

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

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

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

浏览器内核介绍：

1.  Chrome 默认的事件监听参数：  
    ![在这里插入图片描述][20200702171555841.png]

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

1.  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 默认是不会阻止滚动的。

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

参考文章:[添加链接描述][Link 1]

[20200702171555841.png]: https://img-blog.csdnimg.cn/20200702171555841.png
[Link 1]: https://segmentfault.com/a/1190000014134234