解决弹窗滚动穿透

最新推荐文章于 2025-07-22 19:53:31 发布
最新推荐文章于 2025-07-22 19:53:31 发布
阅读量155 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： html javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Roy__Jason/article/details/134332979

解决弹窗滚动穿透


阻止事件冒泡

@mousewheel.stop
vue 滚动dom到指定位置
weixin_45979310的博客
04-05 650
使用原生dom方法，滚动到指定视野。
解决微信小程序自定义弹窗滚动穿透问题
aaa123aaasqw的博客
05-30 1567
在小程序页面里有自定义弹窗时候，发现弹窗外滚动的时候，底部背景页面也会跟随滚动。的高度设置为屏幕高度，这样就可以实现弹窗自身内容滚动时，而底层内容不滚动。可以实现弹框背景不滚动，但是也会导致弹框自身无法滚动。如果你的弹窗本身是不需要滚动的，用这个方法是极佳的。但是这种方式会导致页面自动回到顶部。最外层元素动态添加fixed类。
vue中滚动条冒泡踩过的一些坑 document.getElementById 为null
weixin_53296753的博客
08-14 1019
首先这是一个滚动条冒泡问题, 其次,标题里面写了document.getElementById, 实际上vue中更推荐使用 ref <div class="xxx" ref="xxx" ></div> let xxx = this.$refs.xxx 滚动条冒泡方法是这样的: let con = this.$refs.xxx //是否是firefox浏览器,如果是ff就绑定DOMMouseScroll事件，其他浏览器就用onmousewheel事件触发 l
el-dialog 弹窗滚动影响后面的页面滚动
m0_50809284的博客
11-10 383
@mousewheel.stop盖上遮罩之后不需要下面内容支持滚动 @click.stop 点击子标签不需要触发父标签的事件
Vue手写封装模态弹出框(若水封装,亲测可用)
前端路上坎坎坷坷，总有一天站在顶峰仰望世界！！！
05-31 1247
组件代码 <template> <!-- 遮罩层 --> <div v-show="isMask" class="mask" @touchmove.stop @mousewheel.stop> <!-- 内容 --> <slot></slot> </div> </template> <script> export default { props: {.
Vue mouseWheel 事件兼容
m0_37941483的博客
06-16 2608
mouseWheel 事件怎么做Chrome兼容 通过@wheel.prevent标签调用对应function. 参考答案如下： <template> <div class="scroll-container" ref="scrollContainer" @wheel.prevent="handleScroll" > <div class="scroll-...
uniapp H5的弹窗滚动穿透解决
每天都要努力学习哦~~
04-22 2617
有一层遮罩蒙层覆盖在body上时，当我们滚动，它下面的内容也会跟着一起滚动，看起来好像是上面的滚动事件穿透到下面的DOM元素上一样，我们称之为滚动穿透。
微信小程序 -解决弹窗滚动穿透问题
weixin_41195867的博客
12-03 1574
微信小程序 用fixed设置弹窗蒙层，当弹窗和内容都存在滚动时，滑动弹窗蒙层，下面的页面会有滚动。 希望的效果是弹窗内能正常滚动，滑动弹窗蒙层，下面页面不会产生滚动。 例如：页面上内容也有滚动，弹窗里有展示许多部分内容，需要滚动浏览。 代码块：https://developers.weixin.qq.com/s/hfS1ljmt7NmG （滑动蒙层，下面的页面不会产生滚动，但是但是，弹窗里的内容滚动超级不好，滚动反应很迟钝，要划4~5次才能滑动内容） modal.wxml <view catchtou
解决h5页面弹窗滚动穿透
cxy980626的博客
12-31 2038
问题描述：在页面打开弹窗，弹出遮罩层，在滑动页面时会导致弹窗底部的页面跟着一起滚动 解决方案 一、适用于弹窗文案较少且不需要滚动的场景，如图： // 方法：直接在遮罩层（弹窗）上添加@touchmove.prevent(这里是vue中)，它的作用就是当你全屏的遮罩层（弹窗）时，就会禁止滑动，原理就是因为该弹出层都禁止滑动了，自然而然就不存在滑动穿透的问题了。 <div class="modal" @touchmove.prevent></div> 二、适用于弹窗文案多且支持滚.
vue 弹框产生的滚动穿透问题的解决
01-21
最近开发过程中遇到一些小问题(似乎问题总是那么多)，但一直没什么时间去优化与解决。程序员不能被业务绑架，有时间还是花点在代码，开始这次的vue尝试吧。 首先定义一个全局样式： .noscroll{ position: fixed; ...
浅谈 Mousewheel 事件
热门推荐
YJie的博客
04-28 2万+
      当需要制作转动鼠标滚轮放大页面字体这样的交互效果时，会用到 Mousewheel 事件。      其实在大多数浏览器（IE6, IE7, IE8, Opera 10+, Safari 5+）中，都提供了 “mousewheel” 事件。但杯具的是 Firefox 3.5+ 却不支持此事件，不过庆幸 Firefox 3.5+ 中提供了另外一个等同的事件：”DOMMouseScroll”...
阻止网页内部滚动条mousewheel事件冒泡
dengqiu2187的博客
01-31 1295
利用鼠标滚轮对网页内部无素滚动条触发滚动事件，当滚动条到达元素顶部或底部时不触发浏览器窗口的滚动事件。 通过调用以下函数实现： function preventScroll(id){ var _this = document.getElementById(id); if(navigator.userAgent.indexOf("Firefox")&gt...
Vue @click.stop 与 @mousewheel.prevent
卡尔特斯
10-22 4427
mixins的使用 @click.stop 点击子标签不需要触发父标签的事件 <div @click="tempClick"> <div @click.stop="subTempClick"></div> </div> 盖上遮罩之后不需要下面内容支持滚动 @mousewheel.prevent 表示添加了这个修饰符的标签以下的标签内容无法接受滚动事件 <div class="mask"></div>...
mousewheel 取消_浅谈 Mousewheel 事件
weixin_33397994的博客
01-14 261
当需要制作转动鼠标滚轮放大页面字体这样的交互效果时，会用到 Mousewheel 事件。其实在大多数浏览器(IE6, IE7, IE8, Opera 10+, Safari 5+)中，都提供了 “mousewheel” 事件。但杯具的是 Firefox 3.5+ 却不支持此事件，不过庆幸 Firefox 3.5+ 中提供了另外一个等同的事件：”DOMMouseScroll” (事件和事件属性的测试...
【HTML】图片比例和外部div比例不一致，最大程度占满
爱喝星冰乐的博客
07-21 298
图片最大程度占满
如何使用markdownify库将HTML转换为Markdown？
小屁孩大帅-保密的博客
07-21 261
简单易用提供了简洁的API，只需要调用一个函数就可以完成HTML到Markdown的转换。支持常见标签：能够处理大多数常见的HTML标签，如标题、段落、列表、链接、图片等。适合快速转换：对于一些简单的HTML到Markdown的转换需求，是一个非常合适的选择。不过，也有一定的局限性，例如对于一些复杂的HTML结构或自定义标签的处理可能不够完善。如果有更复杂的转换需求，可能需要结合其他库或自定义转换规则来实现。
基于JAVA实现基于“obj--html--pdf” 的PDF格式文本生成
最新发布
hnmpf的博客
07-22 211
因一个特定的项目需要，将java对象内容以特定样式的PDF格式输出，查看了很多文档，有收费的、免费的、基础集成的。收费的工具就表现突出，免费的工具基本很难满足需求，故着手采用基础集成方案。过程中尝试了很多中技术组合，最后根据个人调试效果选择了"thymeleaf+htmltopdf"组合方案。
一文讲透HTML语义化标签
Sherry Tian的博客
07-18 1206
本文主要讲解了HTML中常用的标签及其基本描述。根据HTML标准，这些标签可以帮助构建结构清晰、语义明确的网页
滚动穿透
03-13
<think>好的，用户想解决前端开发中的滚动穿透问题。我需要根据提供的引用内容来整理解决方案。首先，滚动穿透通常发生在弹窗或浮层出现时，底层页面跟随滚动的情况。引用中提到了几种不同的方法，比如CSS样式控制、事件阻止、小程序特定属性等。 先看引用1，提到给包含块元素添加CSS样式，可能是overflow: hidden来阻止滚动传播。引用2则讨论了之前用useBodyTouchMovePreventDefault方法禁用body的touchmove事件，但这种方法可能影响弹层内部的滚动，需要更精细的控制。引用3和4分别针对钉钉和微信小程序，用了disable-scroll属性和阻止touchmove事件。 我需要把这些方法分类整理，可能分为CSS解决方案、事件阻止方案、框架/小程序特定方案。同时要指出不同场景下的适用性，比如在普通H5页面和小程序中的处理方式不同。还要注意提到动态添加样式，比如在弹窗显示时设置body的overflow为hidden，关闭时恢复。同时，事件处理可能需要阻止默认行为，但要注意不影响内部滚动。可能需要结合passive事件监听器的注意事项，避免性能问题。 另外，用户可能想知道哪种方法最有效或者常见的实践，所以需要总结推荐方案，比如综合使用CSS和事件控制。同时要提醒测试不同设备和浏览器，特别是移动端的兼容性。最后，可能需要提到第三方库或框架提供的解决方案，比如vantWeapp中的处理方式，但引用中没有提到，可能根据已有引用内容保持答案的准确性。</think>### 滚动穿透问题的解决方案 滚动穿透指弹窗或浮层出现时，底层页面随滚动事件触发的不期望行为。以下是分步解决方案： #### 1. **CSS样式控制** - **方法**：在弹窗出现时，为底层容器（如`body`或父元素）添加`overflow: hidden`，阻止滚动链传播[^1]。 ```css /* 弹窗显示时动态添加 */ .body-lock { overflow: hidden; height: 100vh; /* 防止移动端布局错乱 */ } ``` - **适用场景**：H5页面、PC端弹窗。 #### 2. **事件阻止默认行为** - **方法**：在弹窗的`touchmove`事件中调用`e.preventDefault()`，但需确保不影响弹窗内部滚动[^2]。 ```javascript const modal = document.getElementById('modal'); modal.addEventListener('touchmove', (e) => { if (e.target === modal) { // 仅阻止容器自身滚动穿透 e.preventDefault(); } }, { passive: false }); ``` - **注意**：需结合滚动容器判断逻辑，避免内部滚动失效。 #### 3. **小程序特定方案** - **微信小程序**：使用`catch:touchmove`绑定空函数，阻止事件冒泡[^4]。 ```html <view class="popup" catch:touchmove="preventScroll"></view> ``` - **钉钉/支付宝小程序**：通过组件属性`disable-scroll`直接禁用外层滚动[^3]。 #### 4. **框架级优化（如React/Vue）** - **动态事件控制**：弹窗显示时禁用`body`的`touchmove`事件，关闭时恢复[^2]。 ```javascript // 示例：React Hooks const usePreventScroll = (isOpen) => { useEffect(() => { if (isOpen) { document.body.style.overflow = 'hidden'; } else { document.body.style.removeProperty('overflow'); } }, [isOpen]); }; ``` ### 推荐综合方案 1. **CSS + 事件控制**： 弹窗显示时动态为`body`添加`.body-lock`类，并对弹窗容器监听`touchmove`事件阻止默认行为。 2. **框架封装**： 将逻辑封装为可复用的Hook或组件（如`useScrollLock`），简化调用。 ### 注意事项 - **移动端兼容性**：部分安卓设备需同时设置`height: 100vh`和`position: fixed`[^1]。 - **性能优化**：避免频繁操作DOM，优先使用CSS方案。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值