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

Question

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

Answer 1

position:fixed;固定定位

Answer 2

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

Answer 3

一个比较死板一点的方法，你一点击那个model遮罩层的时候，就给body或者content加上overflow:hidden;，关闭的时候就改成overflow:auto；

Answer 4

监听 onscroll 事件，判断scrollTop是否滚动到顶部，滚动到顶部就把 scrollTop 设置为 1
下面是伪代码

model.addEventListener('scroll',() =< {
    if(model.scrollTop <= 1){
      model.scrollTop = 1
    }
}