【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 ...
随机推荐
- FP变更物料编码(增加尾缀)
FP物料编码增加尾缀的程序,标准物料编码是18位,目前程序中增加尾缀的有三种1.DUMMY 2.SP开头 3.P开头 4.C开头 5.BP对应处理程序如下:1.DUMMY SAP_MATE ...
- S 导入值列表浏览器、值列表
先导入值列表浏览器,再导入值列表 一.导出模板 上面为导出模板 二.导入值列表浏览器 下面开始导入EXCEL数据 List Of Values Parent(1).xls List Of Values ...
- NoClassDefFoundError: net/sf/ezmorph/Morpher
使用import net.sf.json.JSONObject; json-lib-2.4-jdk15.jar时报这个错,各种查找,受到https://blog.csdn.net/chenleixin ...
- Win10 Notebook
E:\Perl\site\bin;E:\Perl\bin;C:\Program Files\Microsoft MPI\Bin\;C:\ProgramData\Oracle\Java\javapath ...
- jdeveloper 恢复默认配置
1>jdeveloper的环境设置出现问题,恢复默认的配置,需要删除保存再登录账户中的配置文件,以达到恢复默认配置的目的.只需删除以下配置文件目录即可. C:\Users\当前登录用户名\App ...
- Golang之函数练习
小例题: package main import "fmt" /* 函数练习, 可变参数使用 写一个函数add 支持1个或多个int相加,并返回相加结果 写一个函数concat,支 ...
- Greeplum 系列(七) 权限管理
Greeplum 系列(七) 权限管理 一.角色管理 Role 分为用户(User)和组(Group),用户有 login 权限,组用来管理用户,一般不会有 login 权限.初始化 gp 时创建了一 ...
- hrabs 首页 新闻,快捷菜单,响应式列表,seliverlight
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="firstPage.aspx ...
- TabHost tab项单击事件
TabHost 选项发生变化时会触发OnTabChangedListener事件,但是如果当前已经选中第一项,再次单击该项时,OnTabChangedListener不会触发该事件,所以再次单击选中t ...
- 网络中的A、B、C类地址
1.A类ip地址(1.0.0.0到126.255.255.255) A类地址只有第一个8位表示网络地址,最高位一定为0,所以A类地址的网络号范围可以为:64+32+16+8+4+2+1=127,也就是 ...