javascript - 移动端弹层滑动页面问题

Answer 1

这个问题确实比较难处理，我用的方式也是比较粗暴的。

1. 监听弹层区域的容器(下面都叫它A)的touchstart事件，记录起始点位置，此时的scrollTop值，判断A是否是可滚动的(内容是不是比A高)

2. 监听A的touchmove事件，如果A不可滚动，则直接执行event.preventDefault()

3. 如果A可滚动，则根据记录scrollTop和A的高度判断A的内容是否滚动到了顶部或底部

4. 如果滚动到了顶部，则根据记录的起始点位置和现在的touch的位置判断是否是往下滚动（如果顶部还在往下拉，应禁止掉橡皮筋效果），则执行event.preventDefault()

5. 同理如果滚动到了底部，判断到的move方向是往上，则也应该执行event.preventDefault()

6. 否则执行event.stopPropagation()

Answer 2

你试试这样子行不行？当弹出层弹出来后，把Body的overflow设置为hidden，溢出隐藏试试，然后弹出层关闭后，再auto

然后搜了一下，这里有些方法看你能试出来不能：https://segmentfault.com/q/10...

Answer 3

打开弹窗的时候给页面层加上height:100%;overflow:hidden;弹窗层overflow-y:auto;关闭的时候去掉

Answer 4

楼上是对的。。我自己这么干过。。

Answer 5

针对移动端来说，打开弹窗的时候给页面层加上height:100%;overflow:hidden;弹窗层overflow-y:auto;关闭的时候去掉;时灵时不灵，得看浏览器了。但是在PC上效果还是可以的。
在移动端上，我用的是：
开启弹出层的时候，绑定touchmove：
$("body").bind("touchmove",function(e) {

e.preventDefault();

},false);
关闭弹出层的时候，移除touchmove：
$("body").unbind("touchmove");