zoukankan      html  css  js  c++  java
  • 如何解决移动端遮罩层上面滑动穿透事件

    前段时间,在做移动端项目的时候,遇到滑动穿透事件。可以理解为冒泡事件?大概就是,当你滑动遮罩层上面的内容的时候,遮罩层下面的内容也会跟着一起动,这样用户体验就很不好了。后面百度了一堆方法,都是各种操作dom元素。自己这个本身是一个vue项目,还要操作dom?这就很不爽了吧。

    解决思路 主要两步就完美解决了整个问题 

    1 使用vue的阻止默认事件 @touchmove.prevent  给遮罩层一个阻止默认事件

    2 用一个div把你想不能让他滑动的内容包裹起来,div的样式设置为

    .hidden{
    overflow: hidden;
    position:fixed;
    height: 100%;
    100%;
    }
    3 当你弹出遮罩层的同时把这个div的样式也添加上去。移除遮罩层的同时,也移除这个类
     
    4 重点是div的样式设置为固定定位这样就解决了下面的内容跟着一起滑动的问题了。
     
     
  • 相关阅读:
    详解 注解
    线段树分治
    实用Trick
    CF932F(李超线段树+dp)
    CF24D Broken robot(高斯消元)
    LCT学习笔记
    [HNOI2008]GT考试
    [AHOI2009]中国象棋
    [APIO2012]派遣
    CF961G Partitions
  • 原文地址:https://www.cnblogs.com/bride/p/10114240.html
Copyright © 2011-2022 走看看