移动端弹层滑动页面问题

Question

做了一个demo，怎么样才能做到弹层区域能滑动，页面不滑动，如果使用event.preventDefault()禁止浏览器默认行为，弹层区域也不能滑动了，如何解决！https://liangweibiao.github.i...

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()