还是移动端弹出层滚动问题（body禁止滚动）

Question

最近很多移动端开发者都遇到了这个问题

当然我也遇到了

如图：在移动端弹出层在下拉（拉到顶不能再下拉）的时候，下拉事件会传递到了body(如遮罩下面body内容被下拉了)

.alpha {
    height: 100%;
    overflow: hidden;
    position: relative;
}

.alpha body {
    height: 100%;
    overflow: hidden;
}

$('html').toggleClass('alpha');

以上方法position:fixed 的时候可以做成不能拉的假象，下拉事件还是传递的body了

会造成弹出层不能滚动的假象，所以不行！！！！！

给body 去掉默认滚动事件

e.preventDefault();

禁止了滚动 ， 当然 弹出层也不能滚动了

但怎么给弹出层加上滚动事件？

Answer 1

1.可以用插件，比如iscroll
2.自己写，基于touchstart touchmove，实现自定义scroll
最近公司中的产品也遇到了这个问题，我本人实现了一个侧滑+滚动zepto插件（还在完善中）

演示地址：http://182.92.171.234/aslider-master/demo.html
请用手机，或chrome的模拟手机模式，目前只支持touch事件，鼠标滚轮和鼠标拖动还没做
针对uc浏览器做了差异化处理（因为部分uc浏览器transform：transition会丢帧，这也是我没有用iscroll的原因）

github：https://github.com/EggFiredRice/aslider
还在完善中，但看到题主的问题，先提交到github上，看看是否能帮到题主。

Answer 2

你们写这种的时候有没有发现一个bug,就是在苹果手机上，如果触摸了左边蒙层部分，再滑动右边内容部分的时候，内容不滚动，蒙层也不滚动了？？？