web页面中主程序javascript错误展示的滚动列表位置错误

最近在做移动项目时遇箌一个页面滚动穿透问题具体场景是这样的,在一个可滚动的列表页中打开弹窗底部的页面理论上是不可滚动的,但是当滑动弹窗时底部页面会跟随滚动,这就是所谓的页面滚动穿透的问题这个是比较常见的问题,基本都会遇到Google一下出解决方案也是挺多的。以下根据不同的适用场景总结一些解决方案:

在列表容器的父元素上设置样式overflow:hidden来禁用滚动

当弹出蒙层的时候可以添加底部页面HTML标签的class,取消蒙层时则删除class

当弹出蒙层时禁用了html和body的滚动条,滚动列表的滚动位置会丢失会重置到没有滚动的状态,需要js进行还原

1、未滚动时弹出蒙层,底部列表会被禁用滚动
2、滚动后再弹出蒙层滚动位置会丢失,重置到无滚动的位置

方案二:阻止touchmove默认事件

通过阻止弹窗的touchmove默认事件禁用滾动实现

我要回帖

更多关于 主程序javascript错误 的文章

 

随机推荐