vue 阻止当前页面滚动

最新推荐文章于 2024-08-07 09:34:29 发布
最新推荐文章于 2024-08-07 09:34:29 发布
阅读量4.7k 收藏 3
点赞数 4
分类专栏： html5 uni-app Vue 文章标签： vue html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35827660/article/details/118765273
版权
uni-app 同时被 3 个专栏收录
7 篇文章 0 订阅
订阅专栏
html5
3 篇文章 0 订阅
订阅专栏
Vue
2 篇文章 0 订阅
订阅专栏
本文介绍如何在Vue项目中通过添加特定HTML结构和CSS样式，实现阻止页面滚动的效果。当`stopSlideFlag`设为true时，会显示一个全屏固定div，阻止触摸滑动和鼠标滚轮滚动。此方法适用于需要临时禁用页面滚动的场景，可根据业务需求调整样式和逻辑。
摘要由CSDN通过智能技术生成
  1. 在HTML加入以下内容
<div class="stop_slide" @click="handleClone" 
v-if="stopSlideFlag" @touchmove.prevent @mousewheel.prevent>
</div>
  1. 在data中定义
//禁止滑动div 的Flag
stopSlideFlag: false,

3.样式

.stop_slide {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0);
	// background-color: white;
	z-index: 200;
}
  1. 当你需要阻止当前页面滚动就把stopSlideFlag设为true
  2. 其他看你的业务需求了，再进行改造
海森堡丶
关注
专栏目录
vue 弹层弹起 底部内容禁止滚动 并且保留当前高度
郝峰vip的博客
12-23 322
前沿 这是一个通用的需求，当页面提示框弹起禁止下边的内容滚动，并且保留滚动到的当前的高度，我是在vue公共的方法中写的，全局通用。 第一步：先在你的公共css里边写入这个样式 .dialog-open { position: fixed; width: 100%; left: 0; top: 0; } 第二步 ：在你的公共js里边写入这个方法，导入全局，现在还不知道怎么注册全局...
使用vue-infinite-scroll实现无限滚动效果
08-27
在构建具有大量数据流的应用时，无限滚动（Infinite Scroll）是一种常见的功能，它可以在用户滚动页面接近底部时自动加载更多内容。Vue-infinite-scroll 是一个专门为 Vue 设计的无限滚动插件，它可以帮助开发者轻松...
在vue中实现禁止屏幕滚动,禁止屏幕滑动
12-28
今天写了一个Vue弹层组件，用来全屏查看图片的，大概是下面这么一个效果： 其中背景是透明色的，但是弹出这个组件时手指滑动、鼠标滚轮滑动，底部页面是会动。 作为自己开发的一个常用的组件，这种bug当然是要解决的。 于是学艺不精的我在网上找了蛮久的，看了不少博客，看了不少观点和方法。终于找到了一个最简单、最实在的方法， 代码如下： ... 首先，这个div就是整个遮罩组件的根组件，核心就是d
vue中移动端禁止页面滚动
01-20
vue中移动端禁止页面滑动穿透 1 通过样式 // 禁止滚动 stop () { var mo = function (e) { e.preventDefault() } let cssStr = 'overflow-y: hidden; height: 100%;' document.getElementsByTagName('body')[0].style.cssText = cssStr document.documentElement.style.height = '100%' do
【Vue3】页面优化：清除全局滚动条但页面仍可滚动
最新发布
温的打怪之旅
08-07 431
主要就是用到一个伪类选择器。
vue页面禁止滚动条滚动
m0_64411343的博客
08-24 1842
vue页面禁止滚动条滚动
在Vue中禁止页面滚动条的CSS和JavaScript实现
qls5945的博客
06-12 1037
Vue中禁止页面滚动条的CSS和JavaScript实现方法
vue中阻止click事件冒泡,防止触发另一个事件的方法
08-28
- `.passive`：表示处理函数不会阻止滚动，提升页面性能。 正确使用这些修饰符可以帮助我们构建更加灵活和可维护的Vue应用。需要注意的是，虽然`.stop`可以防止事件冒泡，但并不会阻止在同一元素上的其他事件处理器...
Vue项目移动端滚动穿透问题的实现
10-15
这个问题指的是用户在页面某一层级（如导航栏、侧滑菜单）进行滚动操作时，滚动事件会穿透到页面的下一层级，导致下层内容也跟着滚动。这会影响用户体验，因此需要对其进行处理。本文将详细介绍如何在Vue项目中解决...
阻止滚动条事件冒泡
10-16
标题中的“阻止滚动条事件冒泡”指的是在用户滚动页面某个部分时，阻止这个滚动事件向上传递到其他元素或窗口，特别是阻止`mousewheel`事件的冒泡。`mousewheel`事件通常用于处理鼠标滚轮滚动的行为，它在用户滚动...
Vue h5移动端实现页面不滚动，里面内容滚动
qq_54146568的博客
05-08 941
在 Vue.js 中，如果你想禁止整个页面的滚动，但允许某个内部元素进行滚动，你可以通过一些 CSS 和 JavaScript 技巧来实现。最常见的方式是为禁止滚动的部分设置样式，然后为允许滚动的部分设置适当的滚动属性。这里有一个示例，展示了如何禁止整个页面滚动，但允许页面中的某个特定区域进行滚动。
VUE中禁止页面滚动
哦哦一人
06-16 3778
<div @touchmove.prevent> </div> 加上@touchmove.prevent则代表这部分代码禁止滚动滑动 记录一下
vue中禁止页面滚动/滚动事件穿透
qq_42905523的博客
05-11 9548
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：禁止页面滚动
mosowe
09-23 6498
当某一个标签内滑动时，不希望网页滚动，可在此标签加入此事件@touchmove.prevent
移动端vue页面禁止移动/滚动
岁末zzz的博客
08-15 1525
当需要在移动端中禁止页面滚动，加入：@touchmove.prevent即可， 例子如下 <template> <div @touchmove.prevent> <h3 class="main-bk">{{ title }}</h3> <p>您好！{{provider}}：</p> </div&g...
vue弹窗后如何禁止滚动条滚动
qq_48294048的博客
05-08 4308
1、在有弹出框的页面中，加上以下方法，弹出框出现时调用禁止滚动方法stopScroll()，弹出框去掉是调取允许滚动方法canScroll()即可，代码如下。
vue项目中禁止页面滚动 / 滚动事件穿透 (弹出蒙版时，弹出层下面还可以滚动)
热门推荐
Hassan的小博客!
05-16 1万+
vue项目中禁止页面滚动 / 滚动事件穿透移动端解决方案PC端解决方案 vue项目中弹出层时，蒙版下还可以滚动页面。 移动端解决方案 在蒙层所在div上加 @touchmove.prevent <div class="maskBox" @touchmove.prevent></div> PC端解决方案 弹层显示时调用 stopMove()停止页面滚动 ，弹层消失...
vue初始阻止滚动事件
YhWyl527的博客
11-04 467
//停止页面滚动 stopMove(){ let m = function(e){e.preventDefault();}; document.body.style.overflow=‘hidden’; document.addEventListener(“touchmove”,m,{ passive:false });//禁止页面滑动 }, //开启页面滚动 Move(){ let m =function(e){e.preventDefault();}; document.body.style.overf
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值