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 遮罩层阻止默认滚动事件操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 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 锁定蒙版 不让

  • 详解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中实现禁止屏幕滚动,禁止屏幕滑动

    今天写了一个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解决移动端弹窗滚动穿透问题

    Vue解决移动端弹窗滚动穿透问题

    一.问题描述 在移动端的H5页面中,我们经常会遇到 "点击按钮-->弹窗-->选择选项" 这样的场景.而在选项过多出现滚动条时,滚动滚动条至容器的底部或者顶部.再往上或往下拖动滚动条时,滚动动作会出现穿透,这时候底部的body也会一起滚动. 问题总结:内容在滚动到容器的顶部或者底部时,再向上或向下 强行滚动 ,则出现滚动穿透 二.解决方案思考 参考了网上一大堆的解决方法,大可分为三类方法.经过认真的思考和分析,个人的总结如下: 使用js去控制和改变css 1. 弹窗出现 1

随机推荐