本文主要是介绍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是页面根容器的类名。
这篇关于ios系统禁止页面默认的上拉回弹效果的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!