vue遮罩层如何阻止滚动

目录
  • vue遮罩层阻止滚动
  • vue解决遮罩层滚动方法

vue遮罩层阻止滚动

给vue用fixed定位加一个遮罩层,滚动鼠标滚轮发现下面一层的页面随之滚动,那么如何阻止下层页面滚动?

我这里给遮罩层加一个取消鼠标滚轮默认行为的事件

<div class="popup" @mousewheel="mousewheel">
   <div class="cen">弹框内容</div>
</div>
mousewheel(e){
  e.preventDefault();
}

或者使用vue中提供 @touchmove.prevent 方法可以完美解决这个问题

<div class="popup" @touchmove.prevent v-if="show">
</div>

这会造成一个问题虽然遮罩层滚动问题解决了,但是弹框中的内容要是滚动会间接性的影响到遮罩层的滚动,那么如何解决?

网上查了很多资料,试了一下没有效果,我这里的解决方案是点击详情的时候弹出遮罩层,弹出的时候给body设置overflow:hidden当点击关闭遮罩层时,设置overflow:null

代码如下:

<!-- 手写弹框 -->
    // 遮罩层
    <div class="popup" @touchmove.prevent v-if="show"></div>
    
    // 弹框内容 (已设置overflow:scroll超出滚动)
    <div class="cen" v-if="show">
        <ul>
            <li v-for="(e,i) in dts" :key="i">
                <img :src="e" alt="">
            </li>
        </ul>
    </div>
    // 关闭按钮
    <div class="gb" @click="gb()" v-if="show">
        <svg t="1604306237286" class="icon ic" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2388" width="48" height="48"><path d="M660.518 682.87c-5.903 0-11.804-2.2-16.306-6.702L342.366 374.372c-9.003-9.003-9.003-23.608 0-32.61s23.608-9.002 32.61 0l301.847 301.796c9.002 9.003 9.002 23.607 0 32.61-4.501 4.5-10.404 6.703-16.305 6.703z" p-id="2389" fill="#ffffff"></path><path d="M358.67 682.87c-5.901 0-11.803-2.2-16.304-6.702-9.003-9.003-9.003-23.607 0-32.61l301.846-301.796c9.003-9.002 23.607-9.002 32.61 0 9.002 9.002 9.002 23.607 0 32.61L374.977 676.168c-4.503 4.5-10.404 6.703-16.307 6.703z" p-id="2390" fill="#ffffff"></path><path d="M509.62 956.157c-246.579 0-447.244-200.614-447.244-447.242 0-246.58 200.664-447.218 447.243-447.218 246.58 0 447.243 200.638 447.243 447.218 0 246.628-200.664 447.242-447.243 447.242z m0-848.346c-221.172 0-401.13 179.933-401.13 401.105 0 221.169 179.958 401.128 401.13 401.128 221.17 0 401.127-179.959 401.127-401.128 0-221.172-179.957-401.105-401.128-401.105z" p-id="2391" fill="#ffffff"></path></svg>
    </div>
// 这是列表数据点击时
details(e)
{
   this.dts=e
   this.show=!this.show
   var body = document.getElementsByTagName('body')[0]
   console.log(body)
   body.style.overflow='hidden'
}, 
// 这是点击关闭按钮时
gb()
{
   this.show=!this.show
   var body = document.getElementsByTagName('body')[0]
   console.log(body)
   body.style.overflow=null
}

vue解决遮罩层滚动方法

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

在写移动端页面的时候,弹出遮罩层后,我们仍然可以滚动页面。

vue中提供 @touchmove.prevent 方法可以完美解决这个问题

<div class="dialog" @touchmove.prevent ></div>

或者给不需要滚动的部分加上overflow:hidden属性解决

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

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

    在写移动端页面的时候,弹出遮罩层后,我们仍然可以滚动页面. vue中提供 @touchmove.prevent 方法可以完美解决这个问题 <div class="dialog" @touchmove.prevent ></div> 如果不是使用Vue的话,可以给body添加overflow:hidden属性解决 补充知识:vue项目中禁止页面滚动 / 滚动事件穿透 (弹出蒙版时,弹出层下面还可以滚动) vue项目中弹出层时,蒙版下还可以滚动页面. 移动端解决方案

  • vue实现一个移动端屏蔽滑动的遮罩层实例

    在扯废话浪费大家的时间之前,先上个代码好了,使用vue实现起来很简单-- <div class="overlayer" @touchmove.prevent > </div> 对,就是这么简单,加上@touchmove.prevent就可以屏蔽滑动页面了,然后再和普通的遮罩层一样,加点样式 /*遮罩层*/ .overlayer{ position:fixed; left:0; top:0; width:100%; height:100%; z-index:10;

  • 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遮罩层阻止滚动 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"

  • 弹出遮罩层后禁止滚动效果【实现代码】

    方法一: $('.shade').bind( "touchmove", function (e) { e.preventDefault(); }); 方法二: $("body,.main").height($(window).height()).css({ "overflow-y": "hidden" }); 以上这篇弹出遮罩层后禁止滚动效果[实现代码]就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我

  • 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

  • 在浏览器窗口上添加遮罩层的方法

    如何在浏览器窗口上添加一个遮罩层 背景 在web2.0中,页面弹窗是一个很常见的交互方式,这样既可以避免不必要的页面跳转,也可以改进界面的布局和可交互性. 但是,浏览器原生的弹窗函数(alert, confirm, prompt)有着很大的局限性,主要是它们的展现UI一来很不美观,二来也不够灵活,因此,我们经常需要自行定义弹窗函数. 当我们要实现一个模式弹窗时(模式弹窗,即是说出现弹窗时,页面其它地方不可点击),通常的做法是用一个div将整个页面窗口遮挡住. 实现 下面,我们一步步地实现一种较为

  • 页面遮罩层,并且阻止页面body滚动。bootstrap模态框原理

    实现思路: 1.需要有一个层将body遮住,放在body上方. 2.修改body的overflow属性值为:hidden 废话不多说了,将关键代码贴出来了,兼容火狐,谷歌,ie 遮罩层的样式代码,红色部分是关键的部分 复制代码 代码如下: .cover {position:fixed; top: 0px; right:0px; bottom:0px;filter: alpha(opacity=60); background-color: #777;z-index: 1002; left: 0px

  • jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)

    最近项目遇到了遮罩层的一些问题,总结一下: 弹出遮罩层 遮罩层弹出有非常多的方法,这里只写出本人用的代码,使用jq操作dom的方法进行实现的. <style>.box{position:absolute;width:100%;left:50%;height:auto;z-index:100;background-color:#f5f5f5;border:1px #ddd solid;padding:1px;}</style><div id="bg" v-c

随机推荐