【bug】—— ios scroll 滚动穿透
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 滚动穿透的更多相关文章
- 弹层蒙版(mask),ios滚动穿透,我们项目的解决方案
问题描述 项目开发遇到一个ios独有的问题,在wkwebview中稳定复现 问题: 弹出一个蒙版,当在蒙版上面滑动的时候蒙版后面的内容滚动了 这当然是ios的bug,但是经过我们测试iphone7也会 ...
- modal 遮罩层,滚动穿透 bug
modal 遮罩层,滚动 穿透bug float 弹层 taro 小程序弹框 滚动击穿 问题 https://segmentfault.com/q/1010000011134345 solution ...
- ios中iframe的scroll滚动事件替代方法
在公众号的开发中,遇到ios中iframe的scroll滚动事件失效,在此做下记录. 因为接口获取的数据必须放在iframe中展示,滚动到底部按钮变亮,如图: 代码如下: <!DOCTYPE h ...
- modal 弹框遮罩层,滚动穿透bug 解决方案
modal 弹框遮罩层,滚动穿透bug 解决方案 parent component 动态设置 lock css const computedClassName = classNames( 'activ ...
- 【JS】341- 移动端滚动穿透的6种解决方案
前言 相信能看到这篇文章的你,已经是遇到了这个问题.我就不gif展示问题效果了. 鉴于此问题是面试的常客,故特地针对滚动穿透这个疑难杂症,整理了六个解决方案. 各方法操作难易不同,分别针对弹层和bod ...
- h5页面弹窗滚动穿透的思考
可能我们经常做这样的弹窗对吧,兴许我们绝对很简单,两下搞定: 弹窗的页面结构代码: <!-- 弹窗模块 引用时移除static_tip类--> <div class="ma ...
- js - 移动端的超出滚动功能,附带滚动条,可解决弹层中滚动穿透问题。
背景: 弹层里边有可滚动区域时,在移动端的坑我就不多说了. 找了很多解决滚动穿透的方案,最终都不能完美解决. 一气之下自己js撸了一个. 效果图: 原理: 1.解决滚动穿透:通过给弹层绑定touchm ...
- IOS在滚动的时候fixed消失
前段时间,除了apple发布了新的硬件之外,同步还发布了新的操作系统,IOS11,当大家都将注意力聚焦在那个奇怪的刘海该如何适配的时候,笔者的项目在适配IOS11却出现了其他的问题. 众所周知,I ...
- 一个事件一定时间内只允许点击执行一次 与 vue阻止滚动穿透
可能我的方法很笨,简单实现来的就是给两个状态,一个状态点击时就发生改变,另外一个给一个定时器延迟改变 篮圈部分,给了两种状态,一个isDisable,一个comeTime 点击事件以后comeTime ...
随机推荐
- mysql安装版卸载,解压版安装
卸载:https://blog.csdn.net/cxy_summer/article/details/70142322 解压版安装:https://blog.csdn.net/recky_wiers ...
- FP昨天的新单,今天交期回写到2020年
昨天新单6900000053,回写交期到2020年.在此视图查看此单回写的日期V_OUT_SHIPMENT_PLAN_TESTS,可看到日期是2020年. 1.检查OUT_SHIPMENT_PLAN表 ...
- 并发之CAS无锁技术
CAS算法即是:Compare And Swap,比较并且替换: CAS算法存在着三个参数,内存值V,旧的预期值A,以及要更新的值B.当且仅当内存值V和预期值B相等的时候,才会将内存值 ...
- 存储过程返回update结果集和insert主键
update teacher set name ='111' where id in(286,289);print @@rowcount;--或select将查出,是@@rowcount,不是@row ...
- 打劫房屋 · House Robber
[抄题]: 假设你是一个专业的窃贼,准备沿着一条街打劫房屋.每个房子都存放着特定金额的钱.你面临的唯一约束条件是:相邻的房子装着相互联系的防盗系统,且 当相邻的两个房子同一天被打劫时,该系统会自动报警 ...
- Linux&&Mac 自动增加CSDN访问量
我心里面有两个小人. 一个叫愧疚,对CSDN这么一个分享知识的平台的愧疚,因为我正在做一件对不起CSDN的事情. 一个叫虚荣,对CSDN访问量的渴望过渡使得我踏出了这一步. 这一步,踏入了深渊.. 最 ...
- asp.net core 1.1 mysqlsugarCore mysql.data 要 7.0.5.0
Message=Could not load file or assembly 'MySql.Data, Version=7.0.5.0, Culture=neutral, PublicKeyToke ...
- 6 Django 的视图层
视图函数 一个视图函数,简称视图,是一个简单的 Python 函数,它接受 Web 请求并且返回 Web 响应.响应可以是一张网页的 HTML 内容,一个重定向,一个 404 错误,一个 XML 文档 ...
- tera term通过ttl脚本 自动连接服务器
在现在的这个公司一直使用tera term来远程连接服务器,感觉很方便,特别是它的ttl脚本配置的自动连接.有时候我们可能无法直接连接到目标服务器,需要通过ssh经过多个中间服务器才能连接到目标服务器 ...
- Python + selenium + unittest装饰器 @classmethod
前言 前面讲到unittest里面setUp可以在每次执行用例前执行,这样有效的减少了代码量,但是有个弊端,比如打开浏览器操作,每次执行用例时候都会重新打开,这样就会浪费很多时间. 于是就想是不是可以 ...