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. C++ 基类指针，子类指针，多态

    基类指针和子类指针之间相互赋值(1)将子类指针赋值给基类指针时,不需要进行强制类型转换,C++编译器将自动进行类型转换.因为子类对象也是一个基类对象. (2)将基类指针赋值给子类指针时,需要进行强制类 ...

  2. static变量和static函数

    在C语言编程中,static的一个作用是信息屏蔽! 比方说,你自己定义了一个文件 -- 该文件中有一系列的函数以及变量的声明和定义! 你希望该文件中的一些函数和变量只能被该文件中的函数使用,那么,你可 ...

  3. Java设计模式(7)——装饰者模式

    转载:http://blog.csdn.net/yanbober/article/details/45395747 一.装饰者模式的定义 装饰者( Decorator )模式又叫做包装模式.通过一种对 ...

  4. SpringBoot2.0WebFlux响应式编程知识总结

  5. Hadoop中Writable类之二

    1.ASCII.Unicode.UFT-8 在看Text类型的时候,里面出现了上面三种编码,先看看这三种编码: ASCII是基于拉丁字母的一套电脑编码系统.它主要用于显示现代英语和其他西欧语言.它是现 ...

  6. angularjs 之 $watch

    双向绑定是Angular的核心概念之一,它给我们带来了思维方式的转变:不再是DOM驱动,而是以Model为核心,在View中写上声明式标签.然后,Angular就会在后台默默的同步View的变化到Mo ...

  7. Quartus II 软件生成FFT、NCO、FIR等IP核时卡住不动的解决办法

    据网友表示,遇到这个问题时,在任务管理器中手动关闭quartus_map进程就可以了,由于我的电脑最近一直没有出问题,因此也无法验证.欢迎大家针对这个问题讨论,提出肯定.否定的说法. 另外,很多人表示 ...

  8. MySQL—练习

    前面学习了MySQL的语句的基本用法,这里就开始做一些MySQL练习,这套题目一共45题,属于比较简单的,初学先试着做这个. 参考链接:https://www.cnblogs.com/SJP666/p ...

  9. C# WebService调用方法

    public class WebServiceHelper    {        /// < summary>         /// 动态调用web服务         /// < ...

  10. CSS鼠标手势

    属性名:cursor 属性值(手势状态): auto  :  默认值.浏览器根据当前情况自动确定鼠标光标类型. all-scroll  : IE6.0  有上下左右四个箭头,中间有一个圆点的光标.用于 ...