vue项目加顶部蒙层移动端禁止页面滑动问题

最新推荐文章于 2023-11-16 15:39:12 发布
转载 最新推荐文章于 2023-11-16 15:39:12 发布 · 760 阅读 · 0

本文介绍了一种简单的方法来防止在触摸屏设备上蒙层的意外滑动。通过在div元素上添加@touchmove.prevent指令，可以有效地阻止蒙层响应触摸移动事件，提高用户体验。

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

转载https://blog.youkuaiyun.com/weixin_36517727/article/details/79991113
直接在蒙层所在div上加@touchmove.prevent就好了

如下：

<div class="masktop" @touchmove.prevent></div>
【CSS-04】移动端蒙层底部页面禁止滑动
always_littlesun的专栏
05-03 2万+
本篇主要讲如何在页面上加蒙层。蒙层居中，且底部页面不能再滑动。 蒙层 效果： 关键字：z-index, rgba 实现： body分为两个大的div区域，一个是底部展示的div(div-back),一个是弹出的蒙层div(div-pop)。在弹出的蒙层区域，中间部分是container区域，里面有头部的背景图片和content内容，其中包括[知道了]尾部按钮。 对于div-pop，背景色设置为5
vue移动端弹起蒙层滑动禁止底部滑动
风烟
02-18 2079
解决办法 在蒙层弹起的时候将body设置为fixed定位 在蒙层消失的时候将body恢复原位 popupVisible(newValue) { if (newValue) { document.body.style.position = 'fixed'; document.body.style.width = '100%'; document....
Vue与小程序手写蒙层页面禁止滑动
最新发布
qq_59626859的博客
11-16 425
在h5页面，最上面加一层蒙层，但是由于后面的页面长度大于100vh，即使前面有蒙层也可以滑动后面的页面。
移动端vue页面禁止移动/滚动
qq_35457469的博客
03-18 900
当需要在移动端中禁止页面滚动，加入：@touchmove.prevent即可，如下： <template <div @touchmove.prevent> <canvas id="xxx" width="300" height="300"></canvas> </div> </template> ...
vue3实现遮罩层外部禁止页面滚动，内部可滚动
赵又又的博客
03-09 7132
直接在遮罩层添加 @touchmove.prevent 可以实现禁止页面滚动，但是同时遮罩层内部也无法滚动了。 方法一：(此方法可以实现需求，但是关闭遮罩层后主页面会滑动到顶部，无法回到原来的浏览位置) function mo = function(e){ e.preventDefault(); }; //禁止滚动 stop(){ document.body.style.overflow='hidden'; documen
Vue项目移动端滚动穿透问题的实现
10-15
在移动端开发Vue项目时，常常会遇到一个常见的问题——滚动穿透（Scroll Passthrough）。这个问题指的是用户在页面某一层级（如导航栏、侧滑菜单）进行滚动操作时，滚动事件会穿透到页面的下一层级，导致下层内容也...
移动端页面上下滑动时禁止显示底部黑色
03-29
页面布局 <body id="wrapper"> <div id="container"></div> </body> 引用组件 引用组件支持下面两种方式： clone之后直接拷贝引用bin文件夹下面的preventoverscroll.min.js 从npm下载安装 npm install...
vue 和vue-touch 实现移动端左右导航效果（仿京东移动站导航）
11-27
在本文中，我们将探讨如何使用Vue.js和vue-touch库来实现移动端的左右导航效果，类似于京东移动站的导航。Vue.js是一个流行的JavaScript框架，适用于构建用户界面，而vue-touch则是Vue.js的一个插件，它提供了触摸...
vue页面切换到滚动页面显示顶部的实例
11-28
在开发移动端应用时，我们经常会遇到页面之间切换时滚动位置处理的问题。本示例主要针对的是使用Vue.js和Mint UI构建的应用，特别是在从ListView列表页跳转到详情页时，确保详情页从顶部开始显示。以下是实现这一...
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
08-28
在Vue项目中，当使用vue-router进行页面切换时，我们经常需要实现滚动条自动滚动到顶部的效果，以提供用户友好的导航体验。这通常通过利用`Window.scrollTo()`方法来完成，该方法允许我们指定页面滚动到的精确位置。...
移动端蒙层底部页面禁止滑动
星辰的笔记
09-28 1461
蒙层弹出时设置底部页面为： overflow:hidden;height:100%; 让底部页面高度固定为整屏并溢出隐藏，底部页面则没有滑动空间 蒙层消失后设置底部页面为： overflow:auto 复原底部页面高度变化 ...
vue开发H5，遮罩层下方内容禁止滑动（滚动）
初心 - 杨瑞超个人博客
03-19 6090
初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群): 757345416丨(IT-程序猿-技术交流2群): 936929828 解决办法，直接在遮罩层所在的div加上“ @touchmove.prevent ” 即可 <div @touchmove.prevent>这是遮罩层的div</div> ...
添加遮罩时禁止滚屏，同时已经滚动的页面不会跑到最顶部去然后划不动
qinyuhua93的博客
11-27 1222
1，弹出遮罩层之后，给body 加overflow:hidden,这样会导致一个问题，是已经滑动的页面，会重新滑动到顶部，这种体验效果是很差的。 2，第二方案，首先给body自己一个overflow:auto,然后在执行操作1。但是在IOS适配时，会出现滚动卡顿，没有滑动的惯性，方案二失败。
Vue 弹出层时 禁止页面滑动
热门推荐
cdx1170776994的博客
12-11 2万+
上代码 /***滑动限制***/ stop(){ var mo=function(e){e.preventDefault();}; document.body.style.overflow='hidden'; document.addEventListener("touchmove",mo,false);//禁止页面滑动 },
Vue.js项目实战：实现顶部导航栏滑动标题功能
根据文件信息，我们了解到“滑入和移出顶部导航栏的标题-Vue.js开发”是一个关于Vue.js组件开发的指南，该组件实现了一个顶部导航栏中标题的滑动效果。组件名为SlidingHeader.vue，它可能是包含在名为“vuesence-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值