遮罩层出来后页面滚动问题

刺骨的言语ヽ痛彻心扉 2022-01-13 14:50 445阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

1、自定义遮罩层

.customMask{
        position: fixed;
        width: 100%;
        height: 100%;
        /* top: 0; */
        /* left: 0; */
        background: rgba(0, 0, 0, 0.6);
        z-index: 11;
        right: 0;
        display: flex;
        justify-content: flex-end;
        padding-bottom: 2.25rem;
    }

2、遮罩层出来后页面滚动问题处理

2.1：css

/*遮罩层显示时body的样式*/
    .notScroll {
        overflow: hidden;
    }

2.2：js

/**
     * 打开弹框
     * @author 2019-05-06
     */
    function openQRcodePop(good) {
        // 遮罩出来后让body不可滚动
        $('body,html').addClass('notScroll');
    }
    /**
     * 关闭弹框
     * @author 2019-05-06
     */
    function closeQRcodePop() {
        // 遮罩去掉之后body 可滚动
        $('body,html').removeClass('notScroll');
    }

转载于:https://my.oschina.net/u/2365397/blog/3049229

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220113/d4aadafb50f64b1a87f6d3b84851f36f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，445人围观）

还没有评论，来说两句吧...

相关阅读

相关遮罩层

<view class="pop"> <view class="cont"> 内容 </view> </view> .

深藏阁楼爱情的钟/ 2023年01月11日 13:05/ 0 赞/ 319 阅读

相关 uni-app 禁止遮罩层下的页面滚动

1.需要禁止蒙版下的页面滚动 <view class="mask" @touchmove.stop.prevent="moveHandle"></view>

小咪咪/ 2022年09月08日 05:00/ 0 赞/ 199 阅读

相关 jq给页面添加覆盖层遮罩

先引入jq代码，然后代码如下： $(function(){ var docHeight = $(document).height(); //获

「爱情、让人受尽委屈。」/ 2022年08月11日 05:58/ 0 赞/ 174 阅读

相关前端页面弹框遮罩禁止页面滚动

前端页面弹框遮罩禁止页面滚动前端开发经常会遇到的一个问题就是制作一个弹框来向用户提示信息，在这个弹框弹出的同时，往往会伴有一个灰色的遮罩层挡住页面内容，同时整个页面被这

深藏阁楼爱情的钟/ 2022年06月13日 08:36/ 0 赞/ 701 阅读

相关 css——遮罩层

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

末蓝、/ 2022年06月03日 06:13/ 0 赞/ 301 阅读

相关解决弹窗遮罩层在拉滚动条发现遮罩层没铺满屏幕的问题

opacity: 0.3; filter: alpha(opacity=30); background-color: gray;

向右看齐/ 2022年05月30日 00:07/ 0 赞/ 182 阅读

相关微信小程序穿透遮罩层仍能滚动问题

wxml文件  <view class="shade" catchtouchmove="move" bindtap='closeSe

╰+哭是因爲堅強的太久メ/ 2022年02月20日 10:50/ 0 赞/ 247 阅读

相关遮罩层出来后页面滚动问题

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 1、自定义遮罩层 .customMask{

刺骨的言语ヽ痛彻心扉/ 2022年01月13日 14:50/ 0 赞/ 446 阅读

相关【Vue】24.遮罩层阻止默认滚动事件

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

本是古典何须时尚/ 2021年12月10日 01:47/ 0 赞/ 406 阅读

相关遮罩层代码

1. 目的 : 直接复制来用, 加快工作效率 <div class="cover"></div> .cover{

我会带着你远行/ 2021年09月17日 04:18/ 0 赞/ 514 阅读