【bug】—— ios scroll 滚动穿透

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

【bug】—— ios scroll 滚动穿透

BUG描述在 ios 微信浏览器或原生浏览器中,主内容容器.content在文档流内,并且overflow-y: scroll.在其之上有一个 fixed 定位的弹出层.popUp,滚动.popUp到底部,继续滚动会触发底层容器.content开始滚动. 期望结果滚动弹出层.popUp,底层容器.content不会触发滚动解决方案 google搜的方案基本上都不能完全解决问题...... 经过各种尝试,下面方法可以达到预期效果: 1) 弹出层显示时,改变容器.content的css属性:o…

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

问题描述项目开发遇到一个ios独有的问题,在wkwebview中稳定复现问题: 弹出一个蒙版,当在蒙版上面滑动的时候蒙版后面的内容滚动了这当然是ios的bug,但是经过我们测试iphone7也会复现这个问题,所以没办法需要兼容. vue 弹框产生的滚动穿透问题百度了下好多思路方法1: 直接禁用滚动容器的overflow,然后记录scrollTop并恢复,这种方法不适合我们当前场景. 1. 浮层的入口有多个页面 2. 浮层后面可滚动的容器有多个(3个) 3. 滚动容器有横向和纵向滚动,很…

modal 遮罩层，滚动穿透 bug

modal 遮罩层,滚动穿透bug float 弹层 taro 小程序弹框滚动击穿问题 https://segmentfault.com/q/1010000011134345 solution disable scroll event handleTouchScroll = (flag = `true`) => { log(`touch scroll`) // if (ENV !== Taro.ENV_TYPE.WEB) { // return // } document.body.add…

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

在公众号的开发中,遇到ios中iframe的scroll滚动事件失效,在此做下记录. 因为接口获取的数据必须放在iframe中展示,滚动到底部按钮变亮,如图: 代码如下: <!DOCTYPE html> <html> <head> <title>贷款合同</title> <% include ../include/header.html %> </head> <body style="background:…

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

modal 弹框遮罩层,滚动穿透bug 解决方案 parent component 动态设置 lock css const computedClassName = classNames( 'activity-detail', { // 'activity-detail-scroll-lock': true, 'activity-detail-scroll-lock': isLock, }, ); <View className={computedClassName} onTouchMove={t…

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

前言相信能看到这篇文章的你,已经是遇到了这个问题.我就不gif展示问题效果了. 鉴于此问题是面试的常客,故特地针对滚动穿透这个疑难杂症,整理了六个解决方案. 各方法操作难易不同,分别针对弹层和body是否超出一屏可滚动等不同情况.看官可以对症下药. 目录 1 body无滚动 + 弹层无滚动[css-超出隐藏] 2 body无滚动 + 弹层内部滚动[css-弹框超出滚动] 3 body滚动 + 弹层无滚动[js-阻止弹层中touchmove的默认行为] 4 body滚动 + 弹层内部滚动[js-…

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

可能我们经常做这样的弹窗对吧,兴许我们绝对很简单,两下搞定: 弹窗的页面结构代码:  <div class="mask" ontouchstart = "return false" style="display:none"></div> <div class="main_venue_tip" style="displa…

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

背景: 弹层里边有可滚动区域时,在移动端的坑我就不多说了. 找了很多解决滚动穿透的方案,最终都不能完美解决. 一气之下自己js撸了一个. 效果图: 原理: 1.解决滚动穿透:通过给弹层绑定touchmove和mousewheel事件,取消默认行为实现. 2.取消默认行为后不能滚动:给需要滚动展示的区域绑定touchstart.touchmove和mousewheel事件,监听触发区域的Y值,对应修改可滚动区域的translateY值,实现滚动效果. 缺点/不足:滑动起来略显卡顿,用户体验不好,有…

IOS在滚动的时候fixed消失

前段时间,除了apple发布了新的硬件之外,同步还发布了新的操作系统,IOS11,当大家都将注意力聚焦在那个奇怪的刘海该如何适配的时候,笔者的项目在适配IOS11却出现了其他的问题. 众所周知,IOS在滚动的时候是不能执行js的,这虽然是它内部的实现导致的,也为了解决这一问题,它特地推出的position:sticky属性,来兼容一些对动态设置fixed的场景,不过,当笔者的测试机升级到了IOS11的时候,一切又不一样了: 在ios11上打开滚动以上的页面(如果看不到效果可以访问这个链接),…

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

可能我的方法很笨,简单实现来的就是给两个状态,一个状态点击时就发生改变,另外一个给一个定时器延迟改变篮圈部分,给了两种状态,一个isDisable,一个comeTime 点击事件以后comeTime跟随事件直接改变状态,而isDisable则用setTimeout延迟两秒改变,这样就可以阻止连续点击事件触发器以后事件冒泡产生bug 关于vue阻止滚动穿透,相当简单,就在标签内加一串: @touchmove.prevent 精彩…