BUG描述

在 ios 微信浏览器或原生浏览器中，主内容容器.content在文档流内，并且overflow-y: scroll。在其之上有一个 fixed 定位的弹出层.popUp，滚动.popUp到底部，继续滚动会触发底层容器.content开始滚动。

期望结果

滚动弹出层.popUp,底层容器.content不会触发滚动

解决方案

google搜的方案基本上都不能完全解决问题......

经过各种尝试，下面方法可以达到预期效果：

1） 弹出层显示时，改变容器.content的css属性：overflow-y: hidden；
2） 弹出层消失时，恢复容器.content的css属性：overflow-y: scroll；

【bug】—— ios scroll 滚动穿透的更多相关文章

  1. 弹层蒙版（mask），ios滚动穿透，我们项目的解决方案

    问题描述 项目开发遇到一个ios独有的问题,在wkwebview中稳定复现 问题: 弹出一个蒙版,当在蒙版上面滑动的时候蒙版后面的内容滚动了 这当然是ios的bug,但是经过我们测试iphone7也会 ...

  2. modal 遮罩层，滚动穿透 bug

    modal 遮罩层,滚动 穿透bug float 弹层 taro 小程序弹框 滚动击穿 问题 https://segmentfault.com/q/1010000011134345 solution ...

  3. ios中iframe的scroll滚动事件替代方法

    在公众号的开发中,遇到ios中iframe的scroll滚动事件失效,在此做下记录. 因为接口获取的数据必须放在iframe中展示,滚动到底部按钮变亮,如图: 代码如下: <!DOCTYPE h ...

  4. modal 弹框遮罩层，滚动穿透bug 解决方案

    modal 弹框遮罩层,滚动穿透bug 解决方案 parent component 动态设置 lock css const computedClassName = classNames( 'activ ...

  5. 【JS】341- 移动端滚动穿透的6种解决方案

    前言 相信能看到这篇文章的你,已经是遇到了这个问题.我就不gif展示问题效果了. 鉴于此问题是面试的常客,故特地针对滚动穿透这个疑难杂症,整理了六个解决方案. 各方法操作难易不同,分别针对弹层和bod ...

  6. h5页面弹窗滚动穿透的思考

    可能我们经常做这样的弹窗对吧,兴许我们绝对很简单,两下搞定: 弹窗的页面结构代码: <!-- 弹窗模块 引用时移除static_tip类--> <div class="ma ...

  7. js - 移动端的超出滚动功能，附带滚动条，可解决弹层中滚动穿透问题。

    背景: 弹层里边有可滚动区域时,在移动端的坑我就不多说了. 找了很多解决滚动穿透的方案,最终都不能完美解决. 一气之下自己js撸了一个. 效果图: 原理: 1.解决滚动穿透:通过给弹层绑定touchm ...

  8. IOS在滚动的时候fixed消失

      前段时间,除了apple发布了新的硬件之外,同步还发布了新的操作系统,IOS11,当大家都将注意力聚焦在那个奇怪的刘海该如何适配的时候,笔者的项目在适配IOS11却出现了其他的问题. 众所周知,I ...

  9. 一个事件一定时间内只允许点击执行一次 与 vue阻止滚动穿透

    可能我的方法很笨,简单实现来的就是给两个状态,一个状态点击时就发生改变,另外一个给一个定时器延迟改变 篮圈部分,给了两种状态,一个isDisable,一个comeTime 点击事件以后comeTime ...

随机推荐

  1. redis客户端执行命令没反应

    问题:redis-cli连接客户端后,执行命令没有反应   解决方法:通过指定一个开启守护进程的配置文件来启动服务,redis-server ../redis.conf 说明:redis.conf是我 ...

  2. ROS标定IDS相机

    参考 ROS 相机标定http://blog.csdn.net/ArtistA/article/details/51125560 ROS里的标定程序只要使用了OPNCV的标定程序: opencv 相机 ...

  3. Windows本地Linux虚拟机ping不通的解决办法

    解决办法:启动虚拟机双网卡支持: 网卡1:Host-Only网络 网卡2:NAT网络 设置好以后,可以在Linux主机中ifconfig查看本地Host-Only的网络地址,与电脑中的地址应该是同一网 ...

  4. 动态执行SQL语句，接收返回值

    一.exec和sp_executesql介绍 当需要根据外部输入的参数来决定要执行的SQL语句时,常常需要动态来构造SQL查询语句.比如,一个比较通用的分页存储过程,可能需要传入表名,字段,过滤条件, ...

  5. 企业招聘：UX设计师需要满足他们哪些期望？

    以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具.   为了确定2017年最有价值的用户体验技能和特质,我特地参考了150多份工作要求.最后,得出了以下 ...

  6. android安装前期遇到的问题

    1.安装的eclipse与对应的java版本位数要一致,要么32位,要么64位. 2.关于新版ADT创建项目时出现appcompat_v7的问题 更新ADT至22.6.0版本之后,创建新的安装项目,会 ...

  7. Android系统编译与测试

    1.Android系统分析 2.下载Android源代码(不包括Linux内核部分) 下载好了的Android_5.01.tar.gz,通过samba复制到ubuntu里,再解压之. 可以看到Andr ...

  8. 使用cmd命令登录mysql数据库时报2013-Lost connection to MYSQL server at 'waiting for initial communication packet',system error：0

    [错误内容]:SQL Error (2013): Lost connection to MySQL server at 'waiting for initial communication packe ...

  9. asp.net mvc 5框架揭秘（文摘）

    第1章 asp.net + mvc 1.1.2 什么是MVC模式: model:对应用状态和业务功能的封装,同时包含数据和行为的领域模型. view:实现可视化界面的呈现并捕捉最终用户的交互操作. c ...

  10. 年末福利,C/S应用升级更新完整解决方案放送

    程序员,工作累寿命短,大家应该学会分享,别浪费有限的生命与健康做重复的事情. C/S方式实现的应用有个升级更新功能是必需的,以前整过一个但是没考虑多套C/S应用的情况,那个时候公司只有一套系统,现在又 ...