vue中遮罩层阻止鼠标滚动及页面滚动

墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 800+累计阅读 820平均单平台已同步平台优快云微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网我也要 → 码龄7年

关注

原创最新推荐文章于 2026-04-21 03:40:02 发布 820 阅读 AI 写同款· GEO 优化 ›

在vue中实现禁止屏幕滚动,禁止屏幕滑动主要介绍了在vue中实现禁止屏幕滚动,禁止屏幕滑动，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧立即下载

vue提供一个简易的事件

@touchmove.prevent ——阻止页面滚动
@mousewheel.prevent——阻止鼠标滚动

收录于

技术笔记

当前文章被收录于：

技术笔记

42 篇文章 0 人学习

订阅专栏查看详情

vue

当前文章被收录于：

vue

6 篇文章 0 人学习

订阅专栏查看详情

css

当前文章被收录于：

css

2 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

标签

#vue

机器学习实例（预测房价中位数）（附代码） 1、下载数据：下载一个压缩文件housing.tgz即可，其包含housing.csv（已经包含书有数据。)，用 tax xzf housing.tgz 来解压提取CSV文件。 import os import tarfile import urllib.request DOWNLOAD_ROOT = "https://raw.githubusercontent.com/ageron/handson-ml2/master/" HOUSING_PATH = os.path.join("datasets", 阅读详情

相关推荐

自绘CListCtrl时发现ON_WM_MEASUREITEM_REFLECT和DrawItem(LPDRAWITEMSTRUCT lpMeasureItemStruct) 无响应

自绘CListCtrl时发现ON_WM_MEASUREITEM_REFLECT和DrawItem(LPDRAWITEMSTRUCT lpMeasureItemStruct) 无响应一般情况下，我们都是在 dialog 里面放一个 list 控件，然后用自己的类绑定自己的自绘对象，如同下面： 1. 在 dialog 里面加一个 list 列表 2. 然后绑定这个列表哈哈...

mfreesky的专栏 2169

vue阻止鼠标滚轮事件

阻止鼠标滚轮事件： mousewheel.prevent 示例： <div class=“popUp” @mousewheel.prevent>

YanG_2859390447的博客 1706

用STM32F407做个USB声卡：从CubeMX配置到播放录音全功能实战（附源码）

本文详细介绍了如何使用STM32F407开发板实现USB音频设备的全功能实战，包括CubeMX配置、硬件连接、音频流处理和性能优化。通过双缓冲DMA机制和音频数据处理流程，开发者可以构建高质量的USB声卡系统，适用于录音和播放场景。附源码，助力快速上手STM32音频开发。

weixin_30301449的博客 516

vue实现页面点击页面滚动-禁止鼠标滑轮滚动页面

内容：一般要求鼠标禁止滑轮滚动页面时，需要实现页面点击滚动，跌跌撞撞，走了很多弯路实现了wwwwww vue代码： // 首先在需要的滑动的页面上d的主标签加鼠标禁止事件, @touchmove.prevent @mousewheel.prevent <template> <div id="home-container" ref="view" @touchmove.prevent @mousewheel.prevent> // 下面是我的两个页面,第一个页面 &lt

m0_46183615的博客 3719

基于mediapipe的动作捕捉和unity的人物模型驱动

用到的人体关键点检测的算法是Google开发的基于深度学习的实时多媒体套件，汇集了人体、手部、人脸关键点追踪、物体检测、物体识别等多个流行的视觉任务的成果。整套 Mediapipe正如其名字，专门为便携设备上的多媒体应用设计，模型非常小，在笔记本手机上也能实时跑，跨平台、跨语言。mediapipe实时性是没什么问题。但是是以牺牲了质量为代价的，这种关键点检测一般是用来做动作识别，类似于运动app跳绳计数、判定瑜伽动作标不标准这种。用单目视觉来做人物模型的驱动，总差点意思。

qq_58484580的博客 5727

STM32G474使用HRTIM触发多路ADC采样，通过DMA传输，通过串口打印显示，实现PWM中间时刻采样，避免开关噪声

本章工程使用HRTIM定时器进行ADC的触发，打开主定时器，子定时器A,B,C。（本工程未使用到A与C定时器，配置时可无需打开）主定时器配置：设置主定时器的频率为100KHz，并且设置自动更新以及自动重装载值。子定时器B设置：设置子定时器B为100KHz，并且每九次计数完成后产生一次中断。配置如上：1.打开自动预装载值2.打开自动复位3.设置死区时间以及互补PWM4.定时器复位触发更新寄存器5.定时器翻转重置更新6.重置触发源（定时器计数器在发生更新事件时重置）

weixin_41407439的博客 4907

Vue @click.stop 与 @mousewheel.prevent

@click.stop 点击子标签不需要触发父标签的事件 <div @click="tempClick"> <div @click.stop="subTempClick"></div> </div> 盖上遮罩之后不需要下面内容支持滚动 @mousewheel.prevent 表示添加了这个修饰符的标签以下的标签内容无法接受滚动事件 <div class="mask"></div> <div class="content".

走在搬砖的路上！ 779

MCAL中Dsadc的配置

DSADC模块作为一个专用的模块，主要应用在编码器软解码，功能强大而复杂，这里介绍了Dsadc的mcal配置和详细描述，让你全面学习和理解这个模块功能和应用。

dhyw12399999的博客 787

vue项目中鼠标滚轮缩放图片大小和拖拽效果

这里注意如果自己的页面有滚动条，一定阻止滚动事件的默认行为，否则缩放图片的时候，页面会跟着滚动@mousewheel.prevent 阻止默认行为示例代码 <template> <div span="8" class="left" @mousewheel.prevent="rollImg"> <img :src="imgUrl" alt="" class="img" ref="imgDiv" @mousedown="move" /> <..

JackieDYH的博客 5401

Python爬虫实战：抓取全球船舶AIS定位数据的全流程指南

AIS（Automatic Identification System）自动识别系统是目前全球航运中用于实时跟踪船只位置的主要技术。名称、MMSI编号、呼号实时经纬度船速、航向吃水、目的港状态（航行/停泊/锚泊）航线信息等🛰️海上运输监控：追踪航线，预估到港时间；🛳️船舶管理系统：为物流、港口运营提供决策依据；🌊研究分析：如海洋运输碳排放研究、船只拥堵热力图等；🧠人工智能训练数据集：用于轨迹预测、碰撞预警模型。

2201_76125261的博客 1362

innovus：streamOut gds中pg text带有冒号（:）解决办法

streamOut后查看layout，发现部分PG text后面加了冒号，比如VDD: / VSS:。当然，这个问题还有另一种解决办法，就是通过脚本给terminal打text再streamOut。我正在「拾陆楼」和朋友们讨论有趣的话题，你⼀起来吧？

m0_61544122的博客 1190

vue滚动条禁止_js禁止和开启滚动条事件

开发移动端页面的时候有一个很比较常见的需求，在出现弹窗时，禁止滑动弹窗后面的主体页面。如何实现呢，往下看js实现整个页面禁止滚动：document.body.addEventListener('touchmove',function(e){e.preventDefault();},{passive:false});passive是干吗用的呢，设置该属性的目的主要是为了在阻止事件默认行...

weixin_39863155的博客 1579

【软考高项论文】论信息系统项目管理的干系人绩效域

例如，在处理与电信运营商合作铺设光纤网络的问题时，考虑到其在通信设施建设和运维方面的专业性和重要性，我们将之定位为高权力高利益的干系人，给予了高度关注和优先沟通。项目全程，我们对干系人绩效域的执行效果进行了定期检查和评估，通过定量与定性的数据收集，确认了项目在干系人管理上的成效，具体表现为：建立了稳固的工作关系网络，使干系人普遍认可项目目标；鉴于本项目牵涉到政府各级部门、企事业单位、市民团体、技术研发伙伴等多种类型的干系人，且干系人的诉求和影响力各异，因此，有序且持续的干系人参与管理显得尤为关键。

Programming Talk 1681

vue遮罩层阻止鼠标滚轮滚动事件

背景：给vue用fixed定位加一个遮罩层，表示状态（等待中），滚动鼠标滚轮发现下面一层的页面随之滚动，我们的需求想要阻止下层页面滚动，所以要给遮罩层加一个取消鼠标滚轮默认行为的事件上代码： <div class="mask" @mousewheel="mousewheel"> </div> methods:{ mousewheel(e){ e.preventDefault(); }

weixin_46196950的博客 1259

win10 跳过U8环境检测的IE WebControls.rar

win10 安装u8的时候提示IE WebControls 不通过，这个工具可以欺骗u8的检查。跳过U8环境检测的IE WebControls。提示导入失败后，重新检测通过。

C# WinForm 基于DirectShow.dll编写的程序，可边预览边保存视频，音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择（默认选中第一个）2.可录制wmv和avi两种格式的视频并且都带有音频，avi可以录制的分辨率和帧数进行选择，wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照，也可边录制视频边拍照4.添加了视频和音频的压缩功能（酌情使用）这次二次开发发现C#对DirectShow的相关信息太少，这次做完也不敢藏私共享出来，还望大家指正

vue 遮罩层阻止默认滚动事件

针对vue项目中的操作： vue 遮罩层阻止默认滚动事件在写移动端页面的时候,弹出遮罩层后，我们仍然可以滚动页面。 vue中提供 @touchmove.prevent 方法可以完美解决这个问题 <div class="dialog" @touchmove.prevent ></div> 第二种方法：需要引入的jq大法。点击弹出层的click事件...

Zhooson的博客 2895

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。，新界面，新视觉，

vue遮罩层阻止滚动

给vue用fixed定位加一个遮罩层，滚动鼠标滚轮发现下面一层的页面随之滚动，那么如何阻止下层页面滚动？我这里给遮罩层加一个取消鼠标滚轮默认行为的事件 <div class="popup" @mousewheel="mousewheel"> <div class="cen">弹框内容</div> </div> mousewheel(e){ e.preventDefault(); } ...

sslcsq的博客 3255

IDEA的使用指南

IDEA基于java的使用手册,可以最快速的上手,在使用中不断的丰富自己的使用技巧.

vue 背景弹出禁止滚动_vue 遮罩层阻止默认滚动事件操作

vue 遮罩层阻止默认滚动事件操作在写移动端页面的时候,弹出遮罩层后，我们仍然可以滚动页面。vue中提供 @touchmove.prevent 方法可以完美解决这个问题如果不是使用Vue的话，可以给body添加overflow:hidden属性解决补充知识：vue项目中禁止页面滚动 / 滚动事件穿透 (弹出蒙版时，弹出层下面还可以滚动)vue项目中弹出层时，蒙版下还可以滚动页面。移动端解决方案在蒙...

weixin_42202595的博客 1714

移动端开发遮罩层（弹窗）防止滚动穿透解决方案

在移动端页面开发中，经常会去封装一个遮罩层（全屏弹窗），遮罩层（全屏弹窗），遮罩层（全屏弹窗）的组件，但是如果是固定定位的position：fixed；在弹出的时候会遇到一些小坑，之前搜索了一下，网上的博客也好评论也罢，总是有点缺陷或者累赘代码太多。就比如今天的主题，如何防止遮罩层（全屏弹窗）下方body内容继续滚动呢？移动端开发遮罩层（弹窗）防止滚动穿透完美解决方案首先，pc的肯定直接就...

欢迎来到☆槿畔☆的博客 3万+

Vue 对话框出现时，为什么滚动鼠标还是能滚动底层元素

在 Vue 中，当对话框（如Dialog组件）出现时，底层页面仍然可以滚动，通常是因为对话框未正确阻止底层内容的滚动行为。解决这个问题的常见方法是通过控制页面的overflow样式来禁用底层内容的滚动。

轻风细雨_林木木 575

vue 禁止遮罩层下层内容滚动

定位加遮罩层的时候，发现页面里的内容会随着鼠标滚轮/手指滚动，以下是阻止下层页面滚动的方法。给遮罩层加一个取消鼠标滚轮和手指触摸行为的事件。

米六的博客 898

vue禁止鼠标滚轮事件（禁止弹窗后面的遮罩层下的背景滚动）

vue禁止鼠标滚轮事件（禁止弹窗后面的遮罩层下的背景滚动）代码如下代码如下原理：监听visible的变化，然后通过禁止、解除鼠标滚轮事件来禁止背景滚动 <<template> <div class="dialog-wrapper" v-show="visible" @click.self="close"> <div class="dialog target"> <slot></slot> </div&

朽木自雕的博客 2015

如何在全局遮罩层下取消对某一元素遮罩并鼠标移入此div禁用滚动条

首先介绍一下我遇到的场景如上图所示，我想要添加更多内容跟着tips一起高亮，可见遮罩层的 position:fixed; z-index: 2001已经遮挡住了此时脑袋里面浮现了两种解决方案：另新建一个div，使div完全复制这块div内容，再优先级高于这个遮罩层就行了。但是这样有一个缺点，由于部分布局不同，这个遮盖的div可能不会完全的准确覆盖此div，达不到最理想的效果。第二种，在源div上操作，使其可以显示在遮罩层之上这里我说一下第二种：在此div上添加属性： position

AzeShinja的博客 1311

vue阻止页面滚动

公司h5同一个页面要做三个带灰色背景弹窗，用的是vant组件，组件里面有自带的遮罩层。但是 <div class="magnify" v-show="isShow" @click.self="hide()" @touchmove.prevent @mousewheel.prevent></div> 首先，这个div就是整个遮罩组件的根组件，核心就是div上的事件绑定。 @touchmove 是触摸移动事件 @mousewheel 是鼠标滚轮事件 ...

qq_37493515的博客 770

vue设置遮掩层禁止滚动

vue 遮罩层阻止默认滚动事件在写移动端页面的时候,弹出遮罩层后，我们仍然可以滚动页面。 vue中提供 @touchmove.prevent 方法可以完美解决这个问题 <div class="dialog" @touchmove.prevent ></div> 可以给body添加overflow:hidden属性解决, 但是还有值得一提的是,虽然touchmove不会动,但是鼠标使用滚动键还是会滚动 ...