vue阻止页面滚动

最新推荐文章于 2025-01-10 15:28:04 发布

不懂老爱瞎逼逼

最新推荐文章于 2025-01-10 15:28:04 发布

阅读量688

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_37493515/article/details/117120521

版权

vue 专栏收录该内容

16 篇文章

订阅专栏

公司h5同一个页面要做三个带灰色背景弹窗，用的是vant组件，组件里面有自带的遮罩层。
但是

<div class="magnify" v-show="isShow" @click.self="hide()" @touchmove.prevent @mousewheel.prevent></div>

首先，这个div就是整个遮罩组件的根组件，核心就是div上的事件绑定。
@touchmove 是触摸移动事件
@mousewheel 是鼠标滚轮事件

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

不懂老爱瞎逼逼

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

在vue中实现禁止屏幕滚动,禁止屏幕滑动

10-15

在Vue.js中，有时我们需要在特定情况下禁止用户对页面的滚动操作，比如在展示全屏内容或弹出层时。本篇文章将详细讲解如何在Vue中实现禁止屏幕滚动和滑动的功能。首先，禁止屏幕滚动的基本思路是通过监听并阻止...

一个VUE组件子元素scroll父元素容器不跟随滚动兼容PC移动端

08-09

一个 VUE 组件：子元素 scroll 父元素容器不跟随滚动（兼容PC、移动端）

参与评论您还未登录，请先登录后发表或查看评论

VUE中禁止页面滚动

哦哦一人

06-16

3811

<div @touchmove.prevent> </div> 加上@touchmove.prevent则代表这部分代码禁止滚动滑动记录一下

vue 阻止当前页面滚动

海森堡的博客

07-15

4962

在HTML加入以下内容 <div class="stop_slide" @click="handleClone" v-if="stopSlideFlag" @touchmove.prevent @mousewheel.prevent> </div> 在data中定义 //禁止滑动div 的Flag stopSlideFlag: false, 当你需要阻止当前页面滚动就把stopSlideFlag设为true 其他看你的业务需求了，在进行改造 ...

在Vue中禁止页面滚动条的CSS和JavaScript实现

qls5945的博客

06-12

1620

Vue中禁止页面滚动条的CSS和JavaScript实现方法

Vue h5移动端实现页面不滚动，里面内容滚动

qq_54146568的博客

05-08

1349

在 Vue.js 中，如果你想禁止整个页面的滚动，但允许某个内部元素进行滚动，你可以通过一些 CSS 和 JavaScript 技巧来实现。最常见的方式是为禁止滚动的部分设置样式，然后为允许滚动的部分设置适当的滚动属性。这里有一个示例，展示了如何禁止整个页面滚动，但允许页面中的某个特定区域进行滚动。

vue中移动端禁止页面滚动

01-20

vue中移动端禁止页面滑动穿透 1 通过样式 // 禁止滚动 stop () { var mo = function (e) { e.preventDefault() } let cssStr = 'overflow-y: hidden; height: 100%;' document.getElementsByTagName('body')...

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

11-20

如果您的项目不使用 Vue，或者需要在更广泛的范围内阻止页面滚动，可以通过修改 CSS 来实现。一种常见的方法是，在弹出遮罩层时，将 `body` 的 `overflow` 属性设置为 `hidden`： ```css body { overflow: hidden;...

vue中禁止遮罩底层页面滑动

m0_63666030的博客

01-10

311

链接：https://www.jianshu.com/p/8116edade876。商业转载请联系作者获得授权，非商业转载请注明出处。在点击事件（弹出弹框）时，添加。在点击事件（弹出弹框）时，添加。在隐藏弹框方法中，添加。作者：jing_bao。

vue：禁止页面滚动

mosowe

09-23

6580

当某一个标签内滑动时，不希望网页滚动，可在此标签加入此事件@touchmove.prevent

vue动态禁止页面滚动(h5)，uniapp 动态禁止页面滚动(h5)

奔跑的搬运工

09-16

1462

vue动态禁止页面滚动(h5)，uniapp 动态禁止页面滚动(h5);禁止网页滚动

vue页面有弹层，禁止页面滚动

掺乎君的博客

11-10

200

vue页面有弹层，禁止页面滚动 data() { return { popupVisible: false }, watch: { // 监听data中弹层状态 popupVisible(val) { if (val) { document.body.style.overflow = 'hidden' document.addEventListener('touchmove', function (e) { e.preventDefault()

Vue 有弹出层时，禁止页面滑动

weixin_33755554的博客

02-13

1140

/***阻止滚动限制***/ stop(){ 　　var mo=function(e){passive: false ;}; 　　document.body.style.overflow='hidden'; 　　document.addEventListener("touchmove",mo,false);//禁止页面滑动 }, ...

vue中禁止页面滚动/滚动事件穿透

qq_42905523的博客

05-11

9726

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页面局部元素滚动时，页面整体滚动？

喵喵侠的CSDN博客

11-04

816

你好，我是喵喵侠。我最近遇到了一个问题，就是Vue页面我引入了一个列表组件，这个列表是可以单独滚动的。当我把鼠标移入，开始滚动操作时候，浏览器最右边的滚动条也会开始滚动。我尝试在这个事件，第一行加入，发现还是没有作用，最外层的body还是可以滚动。针对这个问题，我花了点时间研究下，下面是原因分析和解决方法。浏览器的滚动事件需要用preventDefault() 来阻止，这个事件写在某个页面元素上不会影响该元素的正常滚动。这是个小问题，记录一下，方便下次遇到又忘记了。

vue弹窗后如何禁止滚动条滚动

qq_48294048的博客

05-08

4634

1、在有弹出框的页面中，加上以下方法，弹出框出现时调用禁止滚动方法stopScroll()，弹出框去掉是调取允许滚动方法canScroll()即可，代码如下。

vue禁止使用滚轮滚动页面

weixin_45020094的博客

08-12

1427

阻止滚动事件默认行为即可，这样滚轮可以做自己想要的功能，而且页面不会滚动 @mousewheel.prevent=“rollImg”

vue监听页面滚动

最新发布

04-03

### Vue 中监听页面滚动事件的实现方法在 Vue 环境下，可以通过原生 JavaScript 的 `addEventListener` 方法来监听页面滚动事件，并结合 Vue 的生命周期钩子函数完成逻辑处理。以下是具体的实现方式： #### 使用 `addEventListener` 添加滚动监听可以利用 `window.addEventListener('scroll', handler)` 来绑定滚动事件处理器[^1]。为了防止内存泄漏，在组件销毁时应调用 `removeEventListener` 移除事件监听。 ```javascript export default { mounted() { window.addEventListener('scroll', this.handleScroll); }, beforeDestroy() { window.removeEventListener('scroll', this.handleScroll); }, methods: { handleScroll() { const scrollPosition = window.scrollY; console.log(`当前滚动距离顶部的距离为 ${scrollPosition}px`); // 根据需求动态修改 DOM 或状态 if (scrollPosition > 200) { document.getElementById('myElement').classList.add('hidden'); } else { document.getElementById('myElement').classList.remove('hidden'); } } } }; ``` 上述代码展示了如何通过 `handleScroll` 函数捕获滚动位置并根据条件隐藏或显示某个元素[^3]。 --- #### 滚动吸附效果优化当需要实现更平滑的滚动吸附效果时，除了基本的滚动监听外，还需要注意性能优化以及合理的吸附逻辑设计[^2]。例如，使用 `requestAnimationFrame` 替代频繁触发的回调函数，减少不必要的计算开销。 ```javascript methods: { handleScroll() { cancelAnimationFrame(this.requestId); this.requestId = requestAnimationFrame(() => { const scrollTop = window.scrollY; if (scrollTop >= 500 && !this.isSticky) { this.$refs.nav.classList.add('sticky'); this.isSticky = true; } else if (scrollTop < 500 && this.isSticky) { this.$refs.nav.classList.remove('sticky'); this.isSticky = false; } }); } } ``` 此部分代码引入了 `cancelAnimationFrame` 和 `requestAnimationFrame` 组合，用于提升滚动过程中的动画流畅度。 --- #### 被动模式（Passive Event Listener）为了避免某些情况下滚动阻塞问题，可以在绑定事件时设置 `{ passive: true }` 参数。这会告诉浏览器不要阻止默认行为，从而提高滚动效率。 ```javascript mounted() { window.addEventListener( 'scroll', this.handleScroll, { passive: true } ); }, beforeDestroy() { window.removeEventListener( 'scroll', this.handleScroll, { passive: true } ); } ``` 这种配置特别适用于移动端设备上的滚动操作，能够显著改善用户体验。 --- ### 总结以上介绍了三种核心技巧：基础滚动监听、滚动吸附优化以及被动事件监听器的应用。这些技术可以帮助开发者高效地实现在 Vue 应用程序中对页面滚动事件的有效管理。