滚动穿透问题

最新推荐文章于 2024-06-21 16:57:04 发布
最新推荐文章于 2024-06-21 16:57:04 发布
阅读量232 收藏
点赞数
分类专栏： javascript css 文章标签： 滚动穿透问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yang450712123/article/details/79234959
版权

滚动穿透问题

详情描述

解决方法：
1. 在弹层出现时给body设置position：fixed，top：-滚动条高度；弹层消失的时候获取body的top，$(window).scrollTop(-body的高度)。解决大部分场景，在ios微信浏览器无法禁止微信浏览器原生的弹性黑层；
2. 用iscroll.js+禁止touch事件（唯医答题用的方法）解决

FE-阿阳
关注
专栏目录
解决移动端滚动穿透
11-09
解决移动端面滚动穿透问题，以及不影响内容滚动，适合做弹窗
移动端滚动穿透问题
张营的技术博客
05-31 2511
定义：移动端弹出fixed弹窗的话，在弹窗上滑动会导致下层的页面跟着滚动，这个叫 “滚动穿透” 解决方案1 在弹出层的touchstart事件中调用preventDefault 这种方法不可取，至少有3个缺点： 如果弹出层本身是有滚动（条）的话，将会导致弹出层无法滚动，此时用这种方法无异于饮鸩止渴。 一个很常见的场景，点击弹出层，弹出层消失掉，此时也无法触发弹出层的点击回调事件。 弹...
手机端(android ios)滚动穿透问题
最新发布
weixin_49738772的博客
06-21 393
H5 滚动穿透
滚动穿透及IOS惯性滚动究极解决方案
qq_36545095的博客
04-01 1167
滚动穿透及IOS惯性滚动究极解决方案
js 移动端 ios 滚动穿透解决办法
SSS01233210的博客
07-27 1416
分享一个ios弹出mask蒙层或者是弹出框发生滚动穿透的问题，纯属自己慢慢从坑中摸索出来的，希望能帮助到身处坑中的朋友，如果能够解决问题还麻烦给个赞 1.找到滚动穿透的mask蒙层或者是弹出框，去监听它的滚动（以mask为例,命名是react命名的，直接根据自己的框架转换命名就行） useEffect(()=>{ if (判断条件) { document.getElementsByClassName('mask')[0].addEventListener('touchmove', () =&gt
Vue项目移动端滚动穿透问题的实现
10-15
本文将详细介绍如何在Vue项目中解决移动端的滚动穿透问题。 首先，解决滚动穿透问题可以分为两种情况：上层无需滚动和上层需要滚动。 1. 上层无需滚动 当上层元素不需要滚动时，我们可以直接阻止上层元素的`...
解决移动端滚动穿透问题
05-31
在移动Web开发中，"移动端滚动穿透问题"是一个常见的用户体验问题。当用户在页面上触发一个弹出层（如模态对话框、下拉菜单或加载遮罩层）时，通常希望页面主体部分在此期间不可滚动，以防止意外的滚动行为影响交互...
vue 弹框产生的滚动穿透问题的解决
01-21
最近开发过程中遇到一些小问题(似乎问题总是那么多)，但一直没什么时间去优化与解决。程序员不能被业务绑架，有时间还是花点在代码，开始这次的vue尝试吧。 首先定义一个全局样式： .noscroll{ position: fixed; ...
解决微信小程序中的滚动穿透问题
12-13
解决滚动穿透问题的方法通常分为两种情况，根据蒙层是否包含滚动条： 1. **无滚动条的蒙层**： 在蒙层没有滚动条的情况下，可以通过监听并阻止`touchmove`事件来防止底层内容滚动。在WXML中，可以添加`catch:...
Vue 爬坑之旅 -- 解决 IOS 上滚动穿透以及由此引起的坑和爬坑过程
Alex_Zhao 的博客
11-29 5427
以前做 Android 的时候觉得 Android 适配好烦人，各种厂商，各种版本，各种机型都需要做适配，烦的一笔。现在做 H5 了，也还是要面对适配的问题，不过现在是反过来了，写好的代码在 Android 上跑的好好的，但是到了 IOS 上可能会出现各种问题，现在做适配基本都是针对 iOS 来做的了。 IOS 上要做的适配有很多，比如 1px ，图片，fixed布局，点击延迟，滚动穿透等等，各种...
移动端、pc端，遮罩层滚动穿透问题
yiyueqinghui的博客
02-22 3335
常见的解决方式有一下三种： 1. css 之 overflow: hidden； .model-open { overflow: hidden; height: 100%; } 遮罩层显示时将 .modal-open 添加到 html上，删除多余一页的部分，禁止页面滚动。 遮罩层隐藏时，移除.modal-open，恢复页面滚动即可； 缺点： pc端有效，移动端无效 2. js 之...
ios滚动穿透问题的两个解决方案
m0_37728716的博客
04-11 2916
1、当触摸元素有-webkit-overflow-scrolling样式时，若触摸元素有滚动条，则不会发生滚动穿透，若触摸元素无滚动条，则touchmove事件依然会穿透至视图下层带有-webkit-overflow-scrolling的元素上。一般弹框是这种情况，这也是需要主要处理情况，而且这并不是由事件穿透造成的bug，所以阻止事件传播并没有用。 2、当触摸元素无-webkit-overfl...
IOS微信小程序页面滚动导致滚动穿透的解决办法
sslyfnk的博客
05-06 1711
IOS微信小程序页面滚动导致滚动穿透的解决办法当微信小程序页面存在弹窗并且有可滚动的列表时，IOS默认的页面滚动会使弹窗滚动列表失焦，从而出现弹窗列表无法滚动的情况
解决ios滑动穿透问题
lzc的博客
12-16 4724
function closest(el, selector) { const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector; while (el) { if (matchesSelector.call(el, sel...
解决移动端滚动穿透的6种方法，经常发生在弹出遮罩层内容滚动，下面页面也滚动的情况
男神的专栏
02-29 2689
这时，我们可以通过记录用户打开弹窗前所滚动页面的位置，在弹层展开的时候赋给body在css中的top值，等关闭弹层的时候，再把这个值赋值给body在js中的scrollTop值，还原body的滚动位置。2、touchmove手势移动的时候，再次获取最新的坐标点y的值y2，（其实记录可滚动区域的可滚动高度、当前滚动距离等可以在一开始就记录，我这里写到了touchmove里，还可以再优化）。当弹层出现的时候不需要再禁掉body的滚动效果了，我们可以从弹层方面入手，阻止弹框的touchmove事件的默认行为。
解决移动端可恨的滚动穿透问题
唐唐唐行的博客
06-12 745
原文地址：https://uedsky.com/2016-06/mobile-modal-scroll/ 获取最佳阅读体验并参与讨论，请访问原文 众所周知，移动端当有 fixed 遮罩背景和弹出层时，在屏幕上滑动能够滑动背景下面的内容，这就是臭名昭著的滚动穿透问题
解决移动端页面滑动穿透问题
weixin_36599538的博客
09-22 4854
前几天遇到移动端页面穿透问题相信很多人也遇到过相应的情况    这个问题特别顽固  电脑端用谷歌移动界面测试没有问题 但是安卓 ios 还是会有问题  而且安卓 和 ios 下面两种放法  支持还不一样导致这个问题弄了很久     内容有点多请详细阅读！！！！ 就像这个情况 滑动答案的时候 答案到了底部继续滑动 题干的页面也会跟着滑动 为了解决这个问题 也上网找了很多相关问题 但是都没有解
h5页面弹窗滚动穿透的思考
andywang821017的博客
10-22 336
　　可能我们经常做这样的弹窗对吧，兴许我们绝对很简单，两下搞定： 　　弹窗的页面结构代码： <!-- 弹窗模块 引用时移除static_tip类--> <div class="mask" ontouchstart = "return false" style="display:none"></div> <div cl...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值