移动端,弹出层经常会出现,在弹出层触摸滑动,弹出层下面的body也跟着滑动。
出现这个事情的原因:当我们触摸手机屏幕上下滑档的时候,这个事件是会传递到body上面,也就是事件冒泡。而页面所有的内容都在body里面,如果页面里面的内容超过一屏的高度,撑开了body的高度,body会跟着滑动。
类似这样的html结构,即便body的高度是一屏,但是被内容撑开了,也是会滑动。
这只是一种原因。
最关键的还是,滑动的事件冒泡到了body层,从而触发了body的滑动。
原因找到了,那么只需要不触发body的滑动,那么阻止事件冒泡,或者更改css让内容不撑开body都可以解决滑动的问题。
现在滑动绝对定位的div,body高度因为没有被内容撑开,所以body无法滑动,而需要滑动的内容和绝对定位的div是平级的,所以触发不了滑动事件。
网友评论