ios系统禁止页面默认的上拉回弹效果
ios浏览器中页面滑到顶部或者底部继续往下/往上拖动时,页面底部背景会出现白色,产品要求去掉默认的回弹效果。页面结构如下:整个页面只有一屏,但是页面中弹出的浮层可以滚动。最终解决方法如下:if (isIOS) {document.addEventListener('touchmove', function(event) {const path = event.path || (event.comp
·
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是页面根容器的类名。
更多推荐
已为社区贡献3条内容
所有评论(0)