ios系统禁止页面默认的上拉回弹效果

ios浏览器中页面滑到顶部或者底部继续往下/往上拖动时,页面底部背景会出现白色,产品要求去掉默认的回弹效果。 页面结构如下: 整个页面只有一屏,但是页面中弹出

ios浏览器中页面滑到顶部或者底部继续往下/往上拖动时,页面底部背景会出现白色,产品要求去掉默认的回弹效果。
页面结构如下:
在这里插入图片描述
整个页面只有一屏,但是页面中弹出的浮层可以滚动。

最终解决方法如下:

if (isIOS) {document.addEventListener('touchmove', function(event) {const path = event.path || (event.composedPath && event.composedPath())if (!mainContentEle) {mainContentEle = document.querySelector('.main-content')}if (path && Array.isArray(path) && path.includes(mainContentEle)) {event.preventDefault();}}, { passive: false });}

要点:
利用event.path判断当前滑动的区域是在页面还是浮层中,如果是页面滚动事件,则利用event.preventDefault()阻止掉事件,如果不是则正常滚动。

注:even.path会有兼容性问题,可以参考:event.path兼容性问题
.main-content是页面根容器的类名。