怎么样防止兄弟元素的滚动

Question

遇到一个问题，写一个手机页面。在body中有两个元素：一个元素content，用来显示页面主题内容；一个元素师content的兄弟元素，用来显示弹出的model页面遮罩。现在遇到的问题，在model页面中有个列表能够上下滚动，但是滚动到最上端时，兄弟元素content也开始向上滚动；model页面滚动到最下端时，content也开始向下滚动。理想的状态是，无论model怎么样滚动，content都必须不能动。查看京东网页版app，也有此问题。亲们，可有解决方案。已经尝试了在model里面设置touchmove 阻止冒泡，然并卵。

Answer 1

这个问题我遇到过。在model弹出的时候，你就给content设置一个overflow:hidden和position:fixed，model关闭的时候，再设置回来。但是，这样也有一个问题，ios的Safari浏览器会有一个小bug：在你关闭model的时候滑动content可能需要先点击一下这个content，否则就会滑不动。所以，很多移动端的弹窗都会选择不管content的滑动。实际上这对用户体验也没有什么影响。