解决vue h5 遮罩滚动穿透问题

最新推荐文章于 2025-02-22 05:15:00 发布
最新推荐文章于 2025-02-22 05:15:00 发布
阅读量562 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： h5 vue  文章标签： vue.js 前端 css3 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lastone1212/article/details/125593849
本文展示了一个使用 @touchmove.prevent 禁止触摸移动事件的简单示例，并通过 CSS 设置了元素的绝对定位及隐藏滚动条。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<div class="test" @touchmove.prevent></div>

@touchmove.prevent

 

body{
    position: absolute;
    overflow: hidden;
}

解决h5页面弹窗滚动穿透
cxy980626的博客
12-31 2041
问题描述：在页面打开弹窗，弹出遮罩层，在滑动页面时会导致弹窗底部的页面跟着一起滚动 解决方案 一、适用于弹窗文案较少且不需要滚动的场景，如图： // 方法：直接在遮罩层（弹窗）上添加@touchmove.prevent(这里是vue中)，它的作用就是当你全屏的遮罩层（弹窗）时，就会禁止滑动，原理就是因为该弹出层都禁止滑动了，自然而然就不存在滑动穿透的问题了。 <div class="modal" @touchmove.prevent></div> 二、适用于弹窗文案多且支持滚.
uniapp H5的弹窗滚动穿透解决
每天都要努力学习哦~~
04-22 2638
有一层遮罩蒙层覆盖在body上时，当我们滚动，它下面的内容也会跟着一起滚动，看起来好像是上面的滚动事件穿透到下面的DOM元素上一样，我们称之为滚动穿透。
H5页面遮罩弹框下层还能滚动的问题
weixin_34237596的博客
03-31 863
在页面上显示一个遮罩层，这是非常常见的操作，在遮罩层上操作，下层也会默认跟随手指滚动 此处就是要在显示遮罩的时候禁止下层滚动。 首先设置一个全局变量 varcanScroll=false; 页面初始化的时候添加事件监听 document.addEventListener('touchmove',function(e){ if(!canScroll)...
h5 vue解决弹窗滑动穿透问题
为啥不能换名字的博客
09-10 638
1.在mian.js中引入prototype.js import Vue from 'vue'; //弹出框禁止滑动 Vue.prototype.noScroll = function () { var mo = function (e) { e.preventDefault() } document.body.style.overflow = 'hidden' document.addEventListener('touchmove', mo, false)// 禁止页面滑动
vue中禁止页面滚动/滚动事件穿透
qq_42905523的博客
05-11 9751
1.移动端 在蒙层所在div上加 @touchmove.prevent <div class="maskBox" @touchmove.prevent></div> 2.PC端 弹层显示时调用 stopMove()停止页面滚动 ，弹层消失时调用 Move()开启页面滚动 在这里插入代码片//停止页面滚动 stopMove(){ let m = function(e){e.preventDefault();}; document.body.style.overflow='hi
vue中禁止页面滚动 / 滚动事件穿透 (弹出蒙版时，弹出层下面还可以滚动)
林中明月间丶
03-11 1588
https://blog.csdn.net/weixin_43106777/article/details/90268333
vue-解决弹出蒙层滑动穿透问题（IOS穿透）
hahahhahahahha123456的博客
08-07 1761
【实现思路】 　　1. vue提供的@touchmove.prevent可以用来阻止滑动，但是这个方法会对其内的子div的滑动事件也禁止掉了，这样会导致中间文字无法滑动。如果没有中间滑动需求，用@touchmove.prevent实现是一个很好的方法。 　　2. 蒙层设为fixed悬浮在最上，底部列表设置overflow-y: hidden；这样可以列表内容就不可以滑了，但实际过程中没有效果，于是想到继续往列表父div向上追溯，对body和html标签设置相关样式，这样就控制住了底部列表滑动问题...
h5 rem vue_基于Vue的移动端h5项目总结
weixin_35909238的博客
12-31 437
以前都是写pc，后来需要写h5移动端项目，会遇到一些自适应和兼容性等方面的问题，下面从自己写过的h5项目中稍稍做点总结。一.自适应布局1.1 vw与rem相结合实现适配1.原理开启一个移动端项目的基础，首先是想好如何在代码中实现移动端适配。之前没有经验，第一个项目里简单粗暴地采用px写死的方法，觉得不好，本项目采用的是像一位优秀同事习得的rem布局方法，它可以自适应不同屏幕尺寸的设备，简单好用。这...
vue在ios手机上的一些问题（这次写的h5公众号）和后面补充的小程序问题
qq_38337245的博客
11-25 2026
坑一：使用定位fixed，底部导航不显示，代码我就不写，总结就是定位套定位，心累代码太多不想贴； 坑二：禁止页面放大缩小， 解决：Vue 移动端禁止页面放大缩小_fuf_xyxnxss的博客-CSDN博客_移动端禁止放大缩小 坑三：移动端h5页面禁止长按选择复制， 解决：移动端h5页面禁止长按选择复制_艾欢欢的博客-CSDN博客 坑四：苹果手机IOS点击输入框弹出键盘后，所有按钮点击位置上移， 解决：苹果手机IOS点击输入框弹出键盘后，所有按钮点击位置上移_料峭春风吹酒醒，微冷， 山头斜...
vue中禁止页面滚动/滚动事件穿透-弹出蒙版时弹出层下面还可以滚动问题解决
JackieDYH的博客
05-26 1981
弹出层时，蒙版下还可以滚动页面 移动端 在蒙层所在div上加@touchmove.prevent <div class="maskBox" @touchmove.prevent></div> PC端 弹层显示时调用 stopMove()停止页面滚动，弹层消失时调用 Move()开启页面滚动 //停止页面滚动 stopMove(){ let m = function(e){e.preventDefault();}; document.body.s...
vue解决遮罩层滚动方法
qq_26642611的博客
04-23 680
vue 遮罩层阻止默认滚动事件 在写移动端页面的时候,弹出遮罩层后，我们仍然可以滚动页面。 vue中提供 @touchmove.prevent 方法可以完美解决这个问题
vue 背景弹出禁止滚动_vue 遮罩层阻止默认滚动事件操作
weixin_42202595的博客
12-23 1620
vue 遮罩层阻止默认滚动事件操作在写移动端页面的时候,弹出遮罩层后，我们仍然可以滚动页面。vue中提供 @touchmove.prevent 方法可以完美解决这个问题如果不是使用Vue的话，可以给body添加overflow:hidden属性解决补充知识：vue项目中禁止页面滚动 / 滚动事件穿透 (弹出蒙版时，弹出层下面还可以滚动)vue项目中弹出层时，蒙版下还可以滚动页面。移动端解决方案在蒙...
vue3实现遮罩层外部禁止页面滚动，内部可滚动
赵又又的博客
03-09 7110
直接在遮罩层添加 @touchmove.prevent 可以实现禁止页面滚动，但是同时遮罩层内部也无法滚动了。 方法一：(此方法可以实现需求，但是关闭遮罩层后主页面会滑动到顶部，无法回到原来的浏览位置) function mo = function(e){ e.preventDefault(); }; //禁止滚动 stop(){ document.body.style.overflow='hidden'; documen
vue 解决移动端滚动穿透
weixin_45077530的博客
07-07 970
弹框滑动穿透问题 问题描述 在组件A里面添加了弹框，A页面是列表，弹框里面也是列表，当弹框里面的内容超过页面高度时弹框出现滑动，随之A页面也出现了滑动，解决方法如下： 在弹窗打开的时候给body的全局滚动设置position:fixed属性，并设置top值；由于设置了fixed属性，那在弹窗的时候body就没有滚动条了。此时如果这么设置会发现body虽然没有了滚动穿透，但是原来的位置丢失了。所以再给body设置fixed属性的时候，要把当前的滚动位置赋值给css的top属性，那在视觉上就没有任何变化了。
vue蒙层滑动穿透问题
斗师——Ace
03-21 2586
添加小程序，兑换各种视频教程/数据资源。 1. 问题：在蒙层上滑动时，会触发底层的滑动。 2. 解决一： 2.1 vue的 @touchmove.prevent 可以用来阻止滑动，但是同时会禁止蒙层内的子元素的滑动事件，如果蒙层内子元素没有中间滑动需求（如只有点击需求），就可以用 @touchmove.prevent 实现阻止蒙层滑动穿透问题。 2.2 蒙层设为fixed悬...
前端解决滚动穿透问题
最新发布
IT枫斗者的博客
02-22 1226
滚动穿透是指在移动端（或具有滚动条的容器中），当一个可滚动的模态框（或类似元素）被打开时，如果用户在该模态框内滚动到尽头，会导致底层页面（或父容器）也跟着滚动。简单的模态框，不需要保留底层页面滚动位置，且页面上没有其他复杂的 fixed 元素。对滚动锁定有较高要求，需要处理各种复杂情况，且不介意引入第三方库的项目。大多数情况下的模态框，需要保留底层页面滚动位置，且对兼容性要求不高。）封装了更完善的滚动锁定逻辑，处理了各种边界情况和兼容性问题。的定位，并设置回之前记录的滚动位置。，并记录当前的滚动位置（
vue弹层滑动穿透问题简单解决方案
weixin_38002190的博客
07-26 534
vue弹层滑动穿透问题简单解决方
组元素滚动穿透的解决方案
weixin_51737813的博客
04-07 382
这是当滚动条在顶部以及在底部时候就会穿透，只要判断顶部是否触底以及底部是否触底判断，来让手指事件取消，但是如果同时出现X和Y轴都有滚动，那么就要限制X 和Y轴一起判断，当角度小于45度时候就不要限制手指事件，这样用户在滚动才不会卡住。2.如果没有遮罩层，也要动态滚动父组件，也要滚动子组件并且子组件的滚动条禁止穿透到父组件，怎么解决？1.如果是有遮罩层的，直接禁止父元素滚动条overflow-y: hidden;
（PC/移动端）遮罩弹出层滑动影响body滚动问题处理
life不进则退的博客
04-03 755
######最近在制作一个弹出层效果时碰到一个问题，当遮罩弹出层显示时使用鼠标滚轮可以滚动body的滚动条。如果在弹出层里面有滚动条，将弹出层里的滚动条滑动到底部后继续滑动会导致body的滚动条滚动，在移动端手指滑动也会造成这样的问题。 未解决问题的代码如下 <!DOCTYPE html> <html lang="en"> <head> &l...
移动端h5实现scrollView
01-23
### 实现移动端 H5 的 ScrollView 组件 为了实现在移动端 H5 中的 `ScrollView` 功能，通常会借助现有的 UI 库来简化开发过程。Vant 是一个流行的 Vue.js 移动端组件库，提供了丰富的交互控件。 #### 使用 Vant 和自定义逻辑构建 Scroll-View 通过结合 Vant 提供的基础组件以及一些额外的 CSS 属性设置，能够创建出满足需求的滚动容器[^1]： ```html <template> <div id="app"> <!-- 设置固定高度并允许内部内容溢出 --> <van-list> <ul class="custom-scroll-view"> <li v-for="(item, index) in items" :key="index">{{ item }}</li> </ul> </van-list> </div> </template> <script setup lang="ts"> import { ref } from &#39;vue&#39;; const items = ref([&#39;Item 1&#39;, &#39;Item 2&#39;, ..., &#39;Item N&#39;]); </script> <style scoped> .custom-scroll-view { max-height: 300px; overflow-y: auto; } </style> ``` 此代码片段展示了如何利用 Vant 列表组件包裹住具有特定样式的无序列表 `<ul>` 来模拟 `ScrollView` 行为。同时设置了最大高度 (`max-height`) 和垂直方向上的自动滚动(`overflow-y:auto`)属性以确保当内容超出设定范围时能正常显示滚动条。 #### 解决 iOS 设备上滚动穿透问题 对于某些场景下可能出现的滚动穿透现象——即点击弹窗或其他浮层时不希望触发背景页面的滚动行为，在 HTML 结构中可以通过监听触摸移动事件的方式阻止默认动作发生[^2]: ```html <div @touchmove.stop.prevent=""> <!-- 弹窗或者其他遮罩层的内容 --> </div> ``` 上述方法适用于防止用户在操作浮动窗口期间意外触碰到了下方不可见但仍响应手势指令的区域。 #### 隐藏 Android 和 iOS 上的原生滚动条 针对不同操作系统间存在的视觉差异特别是 iOS 系统难以完全消除掉滚动条的情况，可通过调整 Webkit 浏览器私有的CSS伪类 `-webkit-scrollbar` 完成定制化外观甚至彻底移除可见部分[^3]: ```css /* 全局隐藏 */ *::-webkit-scrollbar { display: none; } /* 或者仅限于指定元素内 */ .custom-scroll-view::-webkit-scrollbar { width: 0 !important; height: 0 !important; } ``` 以上样式规则将作用于整个文档流中的所有可滚动对象或者是被标记为 `.custom-scroll-view` 类名的对象之上，从而达到预期的效果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

李雪峰吖

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值