在webApp的复合页面中,如果主层或者遮罩层的高度大于屏幕高度,滑动遮罩层时就会引起联动,这就是滑动穿透事件,那么如何解决呢。

我在网上找了很久,有很多人提供了比较好的思路,可惜目前水平不足,看demo的时候一切顺利,改到自己项目中就总是出问题。

先马上两篇比较认可的文章,以后水平提高了再做尝试吧:

1.https://uedsky.com/2016-06/mobile-modal-scroll/

2.https://segmentfault.com/q/1010000012116913/a-1020000012118068

后来谷歌了一下,找到了一个用纯css实现的方法,使用之后发现很有效,具体如下:

1.HTML结构:

2.css:

注:fixed四个方向的属性值都设置成0

Demo地址:http://www.luxiyalu.com/playground/overlay/

posted on 2018-01-19 15:40  鹿大大  阅读(194)  评论(0编辑  收藏  举报