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

刺骨的言语ヽ痛彻心扉 2022-01-13 14:50 448阅读 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 条评论，448人围观）

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

相关阅读

相关 vue遮罩层出现禁止穿透遮罩滚动页面

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

我不是女神ヾ/ 2023年07月07日 03:40/ 0 赞/ 116 阅读

相关遮罩层

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

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

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

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

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

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

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

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

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

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

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

相关 css——遮罩层

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

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

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

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

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

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

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

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

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

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

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

相关遮罩层代码

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

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