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

在写移动端页面的时候,弹出遮罩层后，我们仍然可以滚动页面。 
vue中提供 @touchmove.prevent 方法可以完美解决这个问题

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

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

vue解决遮罩层滚动方法的更多相关文章

  1. vue 解决无法设置滚动位置的问题

    问题描述 在实现锚点定位的时候发现无法设置滚动条的位置. 在Vue中,使用 document.body.scrollTop=952 无法设置滚动条的高度. document.body.scrollTo ...

  2. vue 中view层中方法的使用

    1.使用filters computed:{ }, filters: { filterA: function(value) { return value + 'wh' } }, 2.用法:  {{it ...

  3. 简单的ajax遮罩层（加载进度圈）cvi_busy_lib.js

    cvi_busy_lib.js cvi_busy_lib.js 是一个基于ajax的遮罩js,遮罩区域为body区域.使用比较简单. 效果: 在下面的Js代码,标注为红色标记为需要设置的参数. 1.g ...

  4. 移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究

    PC端解决方案 pc端的解决思路就是在弹出遮罩层的时候取消已经存在的滚动条,达到无法滚动的效果. 也就是说给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加 ...

  5. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  6. 谷歌下解决Pop遮罩层无法遮挡滚动栏下问题

    今天用pop的弹出窗体里,出现一个问题,当网页出现滚动栏里,不能遮挡住,解决Pop遮罩层无法遮挡滚动栏下问题. 可通过下载获取改动后的代码----->进入下载

  7. 解决css3遮罩层挡住下面元素事件的方法

    比如大家常看到的鼠标移入图片中,会有一个挡住图片的黑色半透明遮罩层,上面还有文字介绍,这时候就会遇到该层遮挡住下面图片的跳转链接事件,这时候怎么办呢?有个简单的css3属性可以快速解决该问题:poin ...

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

    vue中提供 @touchmove.prevent 方法可以完美解决这个问题. <div class="child" @touchmove.prevent ></ ...

  9. vue实现一个移动端屏蔽滑动的遮罩层

    在扯废话浪费大家的时间之前,先上个代码好了,使用vue实现起来很简单-- <div class="overlayer" @touchmove.stop > </d ...

随机推荐

  1. 2018SDIBT_国庆个人第一场

    A - Turn the Rectangles CodeForces - 1008B There are nn rectangles in a row. You can either turn eac ...

  2. Servlet基本_サーブレットのライフサイクル、スレッドセーフ

    1.サーブレットのライフサイクル初期化時 ⇒ init() [初回リクエスト時] ↓リクエスト時 ⇒service() ⇒doGet() [Httpリクエストメソッドにより振り分け] 或は⇒doPos ...

  3. 利用docker-machine安装swarm

    转自:https://www.cnblogs.com/jsonhc/p/7832642.html 安装之前的环境: 两个节点,节点1:192.168.101.14,用来创建manager1 machi ...

  4. Zabbix笔记

    简单检查中的icmppingloss[<target>,<packets>,<interval>,<size>,<timeout>]   结 ...

  5. 去除文件BOM头工具

    <?php /** * 用法:复制以下代码至新建的php文件中,将该php文件放置项目目录,运行即可.代码来源于网络. * chenwei 注. */ header('content-Type: ...

  6. 23.网络.md

    目录 1.基本概念 2.常用函数 3.端口 4.协议 4.1.2代码步骤 4.1.3UDPDemo 4.1.4通信格式 4.1.5 群发Demo: 4.1.6丢失数据的情况 4.2TCP 4.2.1三 ...

  7. JAVAWEB 一一 框架整合（SSH,Spring+Struts2+Hibernate IOC/DI AOP声明式事务处理 定时任务）

    package org.springframework.orm.hibernate3; import java.io.Serializable; import java.util.List; impo ...

  8. IDEA导入jar包

    http://blog.csdn.net/a153375250/article/details/50851049

  9. hdu5391-Zball in Tina Town-威尔逊定理(假证明)

    Tina Town is a friendly place. People there care about each other. Tina has a ball called zball. Zba ...

  10. property 、classmethod 、 staticmethod 的用法

    @property # property是一个装饰器函数 ,作用:将一个方法伪装成属性 # 所有的装饰器函数都怎么用? 在函数.方法.类的上面一行直接@装饰器的名字 # 装饰器的分类: # 装饰函数 ...