前端 - 手机端div设置overflow-y:scroll时怎么阻止body页面的滚动?
阿神
阿神 2017-04-17 11:38:09
[HTML讨论组]

例如滚动白色弹出层时到底部时继续滚动就会使背景也滚动,怎么阻止比较好?

阿神
阿神

闭关修行中......

全部回复(7)
怪我咯

将不需要滚动的部分使用fixed定位,滚动的地方使用absolute定位;实现内部滚动

巴扎黑

对局部需要滚动条的元素,尝试使用这个css属性:

-webkit-overflow-scrolling: touch;

我之前解决类似的问题时参考过这篇文章:http://weblog.west-wind.com/posts/2013/Jun/01/Smoothing-out-p-scroll...

阿神

lz这个问题解决了吗?

怪我咯

两种方法,1.设置body:fixed.2.设置body height:100%,设置body的子元素p高度100%,overflow:hidden

ringa_lee

这个问题今天我也遇见了,网上查了半天没有一个靠谱的,所以自己琢磨了半天终于解决,操作如下:
当同时为html,body两标签都添加css样式:height: 100%;overflow: hidden;才能阻止body滚动条滚动,一般都会是动态添加样式,这样写就可以:
$('html').css("height":"100%","overflow":"hidden"});$('body').css({"height":"100%","overflow":"hidden"});
启用设置: $('html').css({"overflow":"auto"});$('body').css({"overflow":"auto"});
拿走不谢。

PHP中文网

阻止事件冒泡到document上

document.querySelector('.luckingboy').addEventListener('touchmove', function(e) {
    e.stopPropagation();
})

或者这样写

document.addEventListener('touchmove', function (e) {
    if (e.target.nodeName == '#document') {
        e.preventDefault();
    } else {
        e.stopPropagation();
    }
})

另外,ios微信浏览器内网页可以上下拖动,如要禁止,需要阻止touchmove的默认行为

document.addEventListener('touchmove', function(e) {
    e.preventDefault();
})

但是,这样做,页面中需要滚动的p也就不能滚动了。可以使用iScroll来滚动!

怪我咯

暴力式:

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

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