javascript - 移动页面滚动穿透如何解决-PHP中文网问答

微信公众号讲师中心

首页

文章

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发 UI设计计算机基础

编程手册

大前端 JavaScript 后端开发数据库移动端运维开发 UI设计计算机基础 XML Web Services

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程

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

迷茫 2017-04-10 15:35:28

[JavaScript讨论组]

863

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

迷茫

业精于勤，荒于嬉;行成于思，毁于随。

全部回复(13)

阿神2017-04-10 15:37:28 13楼

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

    dom.style.overflowY = 'hidden';

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

赞 +0

添加回复

怪我咯2017-04-10 15:37:28 12楼

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

赞 +0

添加回复

PHPz2017-04-10 15:37:28 11楼

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

赞 +0

添加回复

迷茫2017-04-10 15:37:28 10楼

禁用弹框下页面滚动

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

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

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

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

赞 +0

添加回复

大家讲道理2017-04-10 15:37:28 9楼

同样遇到了这个问题

赞 +0

添加回复

ringa_lee2017-04-10 15:37:28 8楼

禁止事件冒泡

赞 +0

添加回复

迷茫2017-04-10 15:37:28 7楼

300毫秒带来的问题

赞 +0

添加回复

高洛峰2017-04-10 15:37:28 6楼

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

赞 +0

添加回复

高洛峰2017-04-10 15:37:28 5楼

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

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

  overflow-y: hidden;

赞 +0

添加回复

PHP中文网2017-04-10 15:37:28 4楼

Fastclick?

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>