手机端div设置overflow-y:scroll时怎么阻止body页面的滚动?

发布于 2022-09-01 12:51:44 字数 152 浏览 17 评论 0

图片描述

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(7

爱情眠于流年 2022-09-08 12:51:44

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

你怎么敢 2022-09-08 12:51:44

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

-webkit-overflow-scrolling: touch;

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

(り薆情海 2022-09-08 12:51:44

暴力式:

cssbody {
    height: 100%;
    overflow: hidden;
}
话少情深 2022-09-08 12:51:44

lz这个问题解决了吗?

神魇的王 2022-09-08 12:51:44

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

木格 2022-09-08 12:51:44

这个问题今天我也遇见了,网上查了半天没有一个靠谱的,所以自己琢磨了半天终于解决,操作如下:
当同时为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"});
拿走不谢。

心的憧憬 2022-09-08 12:51:44

阻止事件冒泡到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();
})

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文