javascript - 还是移动端弹出层滚动问题(body禁止滚动)
伊谢尔伦
伊谢尔伦 2017-04-10 15:40:07
[JavaScript讨论组]

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

当然我也遇到了

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

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

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

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

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

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

给body 去掉默认滚动事件

e.preventDefault();

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

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

伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳,潜力无限,来学PHP伐。

全部回复(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上,看看是否能帮到题主。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号