移动页面滚动穿透如何解决_Html5_论坛

移动页面滚动穿透如何解决

踏***e 分类：Html5 人气：3556 回帖：13 发布于6年前收藏

在安卓系统的webview下写的页面，各种版本包括4.4，当弹出一个半透明全屏的弹框后，这时在PC上滚动条应该是不可用的，但是在webview下，在弹框上用手指滑动，弹框下面的页面是会跟着动的。不知道有没有人能解决，去谷歌也不知道用什么关键词，百度真是坑爹 = =！求大神指点

标签：css3 css html html5 javascript

讨论这个帖子（13）垃圾回帖将一律封号处理……

Lv3 码奴

懒***材职业无 6年前#1

https://bumfo.github.io/dialog.html

Lv6 码匠

de***oo 页面重构设计 6年前#2

我解决的方法就是在弹层出现后，将它下面可能出现的元素的设置:

    dom.style.overflowY = 'hidden';

关闭弹层后再恢复这个特性

Lv5 码农

陌***4 站长 6年前#3

同样遇到了这个问题

Lv7 码师

阿***梦学生 6年前#4

我咋没觉得这是个问题呢，我觉得挺好的，不就应该这样吗

Lv3 码奴

逆***动 PHP开发工程师 6年前#5

禁用弹框下页面滚动

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

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

当你遮盖弹出的时候或者隐藏的时候让 html 切换 class alpha

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

Lv1 新人

km***04 JS工程师 6年前#6

document.body.style.overflow = 'hidden';

http://stackoverflow.com/questions/2469529/how-to-disable-scrolling-th...

Lv4 码徒

23***om JS工程师 6年前#7

终极解决答案... 经过一年多的探索... 给大家一个答案... 我也是日了狗了...
<body> <ui-view class="container" style="display: block; height: 100%; overflow: auto"></ui-view> <div id="showDetail" class="show-detail" ng-show="showDetail" ng-include="'showDetail.html'"></div> </body>
这里 ui-view这个标签是正常显示的，点击上面的元素后弹出showDetail。
一次无意间的测试，在ui-view的标签上加了一个overflow：auto 滚动就不穿透了...
如果不在对应的需要滚动的容器上，加这个样式的话，最后滚动条会在body上。
射了这个样式的话 window.on('scroll') 也会失效。这个时候要监听container上的scroll

Lv4 码徒

25***om UI设计师 6年前#8

禁止事件冒泡

Lv3 码奴

那***s JS工程师 6年前#9

300毫秒带来的问题

Lv6 码匠

马***0 软件测试工程师 6年前#10

wap下我是这样处理的，还没嵌入到webview验证。

点击弹框的时候，给html,body加上一个class，控制样式为：

  overflow-y: hidden;

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取