禁止 ios 橡皮筋效果

body 的橡皮筋效果触发，会导致内部元素无法滚动，解决方法很简单。

高版本 ios 只需对 body 这是 height:100%; overflow:hidden; 即可。

而低版本浏览器，则需要阻止body的默认行为 event.preventDefault()

但是执行时机是关键，否则整个窗口都将无法滚动，根据实际情况，上代码：

注意： {passive: false} 一定要加，否则不生效。

const ios = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
if (ios) {let startY, endY, isScroll = false;document.body.addEventListener('touchstart', function(e) {startY = e.touches[0].pageY});document.body.addEventListener('touchmove', function(e) {if(isScroll) returne.preventDefault()}, {passive: false})document.querySelector('.scrollDom').addEventListener('touchmove', function(e) {endY = e.touches[0].pageYlet domHeight = this.clientHeight,domScrollTop = this.scrollTop,scrollDomHeight = document.querySelector('.scrollChildren').clientHeight// 手指下滑，页面到达顶端不能继续下滑if ((endY > startY && domScrollTop <= 0) || (endY < startY && domHeight + domScrollTop >= scrollDomHeight)) {isScroll = false} else() {isScroll = true}}, {passive: false});
}

参考：https://www.cnblogs.com/cuncunjun/p/7493782.html

禁止 ios 橡皮筋效果相关推荐

vue中禁止ios橡皮筋效果（亲测有效）
相信有很多前端的朋友都遇到过这个问题,这个问题真的很头疼.ios的橡皮筋效果会带来一些莫名其妙的bug.如果直接对body禁止的话,那整个页面都无法滑动了.所以我今天带来一个解决方案.原博客找不到了, ...
解决IOS橡皮筋效果
1.一棍子打死 (全部滚动条失效) app.vue文件mounted中 document.body.addEventListener('touchmove', function (e) {e.prev ...
html关闭ios橡皮筋效果,禁止ios浏览器页面上下滚动 (橡皮筋效果)
在ios任何版本的浏览器(包括ios微信内置的浏览器),滚动页面的时候会出现整个页面上下滚动的效果(百度说是橡皮筋效果),虽然不耽误使用,但是让人心烦,所以要禁止掉这个行为. 有两种方法可以解决这个问 ...
html关闭ios橡皮筋效果,JS禁止苹果iphone浏览器拖动反弹（橡皮筋效果）
JS禁止苹果iphone浏览器拖动反弹(橡皮筋效果) 2015-2-1 分类: JavaScript笔记,前端资源禁用苹果 iphone 拖拽反弹弹簧效果组织默认行为解决一: $ ...
H5禁止ios回弹效果
IOS的移动端H5页面滚动浏览器到底部或者在整个页面被往上拉的时候都会出现一个回弹的效果. 如果想禁止整个回弹效果,那么首先.引入inobounce.js库,就可以禁止body的滚动下载地址: i ...
微信小程序 ios 橡皮筋效果踩坑
scroll-view在ios上面会继承原来 ios 的UI 框架所以会出现"橡皮筋"效果,即上拉到最顶部的时候还可以继续上拉放手会回弹(左右同理) 解决方案 1.在不需要滚动的页 ...
消除iOS橡皮筋效果
document.body.addEventListener('touchmove', function (e) { e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果 ...
解决h5嵌套ios中的橡皮筋效果
最近公司功能需求要把新开发的h5页面嵌入ios端app中,遇到这个让人很是头疼的一个问题,h5页面在ios端,页面一直存在回弹效果.如果直接对body禁止的话,然后个页面都无法滑动了.今天终于搞定了这 ...
解决IOS因iframe滑动引起的橡皮筋效果
这个在上一篇文章也提过,IOS应用有一个功能需要预览邮件内容,邮件内容是iframe嵌套,并且使用scale进行缩放,在iframe上使用mailbox包含这个ifrme:在box上添加了相应的样式, ...

禁止 ios 橡皮筋效果

禁止 ios 橡皮筋效果相关推荐

最新文章

热门文章