zoukankan      html  css  js  c++  java
  • 移动端开发——移动端遮罩层滚动防穿透body解决方案

        经常做移动端网页开发的朋友们,都应该会遇到,弹起遮罩层的交互需求,比如小点的toast提示框,modal对话框,也有满屏的提示框,或者可操作交互的弹框;

    有些需求是要求在弹框上可操作,可滚动;在滚动时,就会遇到比较奇怪的兼容bug了,当你在滑动遮罩层时,下面的body页面也会跟着滚动,页面发生了“穿透”,即便你对弹出的元素设置最高级别的z-index,没什么用;

    对这个坑也是研究了一端是时间,才搞定,下面给他家分享一个实测非常有用的解决方案:

    大致思路,就是弹框出现时,给body设置禁止滚动(overflow:hidden);弹框消失时,再回复该属性;直接贴代码(主要就是CSS+JS),使用方式很简单(代码可直接复制使用),

    1、先命名一个css样式属性:

    body.modal-open {
         position: fixed;
         width: 100%;
     }

    2、js创建一个命名空间,用来动态给body绑定第一步设定的属性;

    var ModalHelper = (function (bodyCls) {
            var scrollTop;
            return {
                afterOpen: function () {//弹框弹出时
                    scrollTop = document.scrollingElement.scrollTop;
                    document.body.classList.add(bodyCls);
                    document.body.style.top = -scrollTop + 'px';
                },
                beforeClose: function () {//弹框消失时
                    document.body.classList.remove(bodyCls);
                    document.scrollingElement.scrollTop = scrollTop;
                }
            };
        })('modal-open');

    3、直接调用

    mask.show();//弹框出现时
    ModalHelper.afterOpen();
    
    
    mask.hide();//弹框隐藏时
    ModalHelper.beforeClose();

    注:可同时搭配touchumove事件使用,给弹框背景层nask设置touchmove时,阻止默认事件@touchmove.prevent;

  • 相关阅读:
    HBase分布式集群搭建过程
    HBase基础知识
    HBase伪分布搭建
    搭建ZooKeeper集群环境
    hadoop集群环境搭建-hadoop之伪分布搭建环境
    乱序数组找出前面的都比他小后面的都比他大的数
    sikuli简介
    ZooKeeper 应用场景
    svmrank原理
    Latex汇总
  • 原文地址:https://www.cnblogs.com/web-wjg/p/11319513.html
Copyright © 2011-2022 走看看