【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 ...
随机推荐
- VMTurbo:应对散乱虚拟机的强劲工具
随着服务器虚拟化技术越来越成熟,虚拟机散乱(VM sprawl)和主机资源管理成为了虚拟化数据中心的管理员眼里的两大问题.面对这种情形,一种可行的解决办法就是使用一款名为VMTurbo(vmturbo ...
- QByteArray to QString
QByteArray => QString void BarEngine::ByteArrayToString(QByteArray &ba, QString &str) { i ...
- Python爬虫进阶五之多线程的用法
前言 我们之前写的爬虫都是单个线程的?这怎么够?一旦一个地方卡到不动了,那不就永远等待下去了?为此我们可以使用多线程或者多进程来处理. 首先声明一点! 多线程和多进程是不一样的!一个是 thread ...
- PHP安装memcache扩展
1.下载memcache.dll扩展 http://pecl.php.net/package/memcache/3.0.8/windows .下载完成之后, 将其中的php_memcache.dll ...
- c# 解释器模式与sping.net表达式的结合应用(金融里经常需要用到公式,这个公式是抽象的需要自己解释)
.代码 using Spring.Expressions; using System; using System.Collections.Generic; using System.Linq; usi ...
- Flink本地环境安装部署
本次主要介绍flink1.5.1版本的本地环境安装部署,该版本要求jdk版本1.8以上. 下载flink安装包:http://archive.apache.org/dist/flink/flink-1 ...
- MSP430G2553 模数转换器 ADC10
一.ADC10组成 ADC10模块是MSP430 MCU内部的一个高性能.10位的模数转换器,包含了SAR(Successive-Approximation-Register) core.采样选择控制 ...
- 基于Extjs的web表单设计器 第一节
前面一节介绍了表单设计器的背景和最终的大概样式,本节主要介绍表单设计器的需求及功能设计. 在讲需求之前先明确几个常用的概念: 主表或者卡片表——具有多行多列的一个区域的控件块,如下图所示. 明细表—— ...
- [Git01]Pro Git 第三章 分支 读书笔记
[git]分支 Git 的分支模型称为“必杀技特性”,而正是因为它,将 Git 从版本控制系统家族里区分出来. Git 有何特别之处呢?Git 的分支可谓是难以置信的轻量级,它的新建操作几乎可以在 ...
- windows服务安装记录
首先打开cmd. 进入这个地址 C:\Windows\Microsoft.NET\Framework\v4.0.30319 执行操作 InstallUtil.exe E:\QueueWinServi ...