vue 遮罩层阻止默认滚动事件操作
在写移动端页面的时候,弹出遮罩层后,我们仍然可以滚动页面。
vue中提供 @touchmove.prevent 方法可以完美解决这个问题
<div class="dialog" @touchmove.prevent ></div>
如果不是使用Vue的话,可以给body添加overflow:hidden属性解决
补充知识:vue项目中禁止页面滚动 / 滚动事件穿透 (弹出蒙版时,弹出层下面还可以滚动)
vue项目中弹出层时,蒙版下还可以滚动页面。
移动端解决方案
在蒙层所在div上加 @touchmove.prevent
<div class="maskBox" @touchmove.prevent></div>
PC端解决方案
弹层显示时调用 stopMove()停止页面滚动 ,弹层消失时调用 Move()开启页面滚动
//停止页面滚动 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.overflow='';//出现滚动条 document.removeEventListener("touchmove",m,{ passive:true }); }
以上这篇vue 遮罩层阻止默认滚动事件操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
详解vantUI框架在vue项目中的应用踩坑
1.订单提交地址等组件的应用. 使用的组件有如下: import {Card,button,Toast,AddressList,Popup,AddressEdit,Area} from 'vant' 主要是配货地址编辑这块: <van-address-edit :area-list="areaList" :address-info="addressInfo" show-postal show-delete show-set-default show-searc
-
vue 弹出遮罩层样式实例
以前做遮罩层都是写最小高度来占满屏,但是总会出现问题,也没改变,今天一个人在交流群上问这个时,看到一个回答解决了我这一个bug,学到了,现在记录一下样式. <div class='popContainer'></div> div.popContainer{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.3); } 这样遮罩层就会占满屏了 补充知识:vue 锁定蒙版 不让
-
在vue中实现禁止屏幕滚动,禁止屏幕滑动
今天写了一个Vue弹层组件,用来全屏查看图片的,大概是下面这么一个效果: 其中背景是透明色的,但是弹出这个组件时手指滑动.鼠标滚轮滑动,底部页面是会动. 作为自己开发的一个常用的组件,这种bug当然是要解决的. 于是学艺不精的我在网上找了蛮久的,看了不少博客,看了不少观点和方法.终于找到了一个最简单.最实在的方法, 代码如下: <div class="magnify" v-show="isShow" @click.self="hide" @
-
vue 遮罩层阻止默认滚动事件操作
在写移动端页面的时候,弹出遮罩层后,我们仍然可以滚动页面. vue中提供 @touchmove.prevent 方法可以完美解决这个问题 <div class="dialog" @touchmove.prevent ></div> 如果不是使用Vue的话,可以给body添加overflow:hidden属性解决 补充知识:vue项目中禁止页面滚动 / 滚动事件穿透 (弹出蒙版时,弹出层下面还可以滚动) vue项目中弹出层时,蒙版下还可以滚动页面. 移动端解决方案
-
vue遮罩层如何阻止滚动
目录 vue遮罩层阻止滚动 vue解决遮罩层滚动方法 vue遮罩层阻止滚动 给vue用fixed定位加一个遮罩层,滚动鼠标滚轮发现下面一层的页面随之滚动,那么如何阻止下层页面滚动? 我这里给遮罩层加一个取消鼠标滚轮默认行为的事件 <div class="popup" @mousewheel="mousewheel"> <div class="cen">弹框内容</div> </div> mou
-
如何阻止小程序遮罩层下方图层滚动
这篇文章主要介绍了如何阻止小程序遮罩层下方图层滚动,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 原因是因为: touchmove事件冒泡: 解决方案: 阻止遮罩层冒泡,在小程序里面 利用catch+事件名就可以阻止冒泡, 所以 在遮罩层填上事件 catchtouchmove="preventdefault" 小程序1.5.0后可以写上 capture-catch:touchmove="preventdefault"
-
vue回到顶部监听滚动事件详解
本文实例为大家分享了vue回到顶部监听滚动事件,供大家参考,具体内容如下 鼠标滚到到页面中间出现的工具浮框 <template> <div class="tools"> <ul @mouseleave="mouseLeave()"> <li @click="toTop(step)">回到顶部</li> <li @mouseover="mouseOver(1)"&
-
弹出遮罩层后禁止滚动效果【实现代码】
方法一: $('.shade').bind( "touchmove", function (e) { e.preventDefault(); }); 方法二: $("body,.main").height($(window).height()).css({ "overflow-y": "hidden" }); 以上这篇弹出遮罩层后禁止滚动效果[实现代码]就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我
-
vue click.stop阻止点击事件继续传播的方法
如下所示: <div id="app"> <div v-on:click="dodo"> <button v-on:click="doThis">阻止单击事件继续传播</button> </div> </div> <script> var app = new Vue({ el: "#app", data: { name: "Vue.j
-
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
本文实例讲述了vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法.分享给大家供大家参考,具体如下: 在网上看了一下vue中监听滚动条滚动事件,清一色的使用document.addEventListener('scroll',function(){}) 我是在做滚动条滑到底部时,自动加载更多的时候有这个需求. 我认为使用document.addEventListener会破坏vue的统一性,对我这种有轻微代码强迫症的人来说,让我感觉很不爽.而且这种做法,会让你更加难以判断是否
-
jQuery阻止移动端遮罩层后页面滚动
css代码: .ovfHiden{overflow: hidden;height: 100%;} jquery: $(".header_right").click(function(){ $('html,body').addClass('ovfHiden'); //使网页不可滚动 $(".searchbox").show(); }) $(".yg-close").click(function(){ $('html,body').removeCla
-
Vue解决移动端弹窗滚动穿透问题
一.问题描述 在移动端的H5页面中,我们经常会遇到 "点击按钮-->弹窗-->选择选项" 这样的场景.而在选项过多出现滚动条时,滚动滚动条至容器的底部或者顶部.再往上或往下拖动滚动条时,滚动动作会出现穿透,这时候底部的body也会一起滚动. 问题总结:内容在滚动到容器的顶部或者底部时,再向上或向下 强行滚动 ,则出现滚动穿透 二.解决方案思考 参考了网上一大堆的解决方法,大可分为三类方法.经过认真的思考和分析,个人的总结如下: 使用js去控制和改变css 1. 弹窗出现 1
随机推荐
- Javascript中关于Array.filter()的妙用详解
- 使用Ajax时处理用户session失效问题的解决方法
- windows环境下Redis+Spring缓存实例讲解
- Jquery easyui 实现动态树
- Spring Boot 定制URL匹配规则的方法
- 基于jquery实现的省市区级联无ajax
- Php中文件下载功能实现超详细流程分析
- php常用hash加密函数
- php使用正则表达式提取字符串中尖括号、小括号、中括号、大括号中的字符串
- phpmyadmin3 安装配置图解教程
- 深入理解JavaScript高级之词法作用域和作用域链
- 用Python从零实现贝叶斯分类器的机器学习的教程
- asp模板引擎终结者(WEB开发之ASP模式)
- CentOS 7 下LAMP实现及基于https的虚拟化主机
- python多重继承实例
- 非常完整全面的蓝屏代码解读
- jQuery选择没有colspan属性的td的代码
- Javascript中setTimeOut和setInterval的定时器用法
- 微信小程序 Canvas增强组件实例详解及源码分享
- Android Apk去掉签名以及重新签名的方法