首页 > 还是移动端弹出层滚动问题(body禁止滚动)

还是移动端弹出层滚动问题(body禁止滚动)

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

当然我也遇到了

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

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

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

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

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

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

给body 去掉默认滚动事件

e.preventDefault();

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

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


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上,看看是否能帮到题主。

【热门文章】
【热门文章】