zoukankan html css js c++ java

关于vue遮罩层和底部内容滚动的问题

如果想遮罩层内容下的内容不滚动，需要去掉html,body的滚动条，自己设置滚动区域，设置height为100vh，遮罩层fixed定位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            html,body {
                overflow: hidden;
                margin: 0;
                padding: 0;
            }
            .scroll {
                position: relative;
                width: 100%;
                height: 100vh;
                overflow: auto;
            }
            ::-webkit-scrollbar {
                width: 4px;
            }
            ::-webkit-scrollbar-button {
                display: none;
            }
            ::-webkit-scrollbar-track {
                background: #FFF;
            }
            ::-webkit-scrollbar-track-piece{
                background: #FFF;
            }
            ::-webkit-scrollbar-thumb {
                background: #BBB;
            }
            .mask {
/*                display: none; */
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.8);
            }
            .content .a {
                height: 400px;
            }
        </style>
    </head>
    <body>
        <div class="scroll">
            <div class="mask"></div>
            <div class="content">
                <div class="a">1</div>
                <div class="a">2</div>
                <div class="a">3</div>
            </div>
        </div>
    </body>
</html>

如果想遮罩层内容下的内容滚动，需要只需要设置为html，body滚动即可

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            html,body {
                margin: 0;
                padding: 0;
            }
            ::-webkit-scrollbar {
                width: 4px;
            }
            ::-webkit-scrollbar-button {
                display: none;
            }
            ::-webkit-scrollbar-track {
                background: #FFF;
            }
            ::-webkit-scrollbar-track-piece{
                background: #FFF;
            }
            ::-webkit-scrollbar-thumb {
                background: #BBB;
            }
            .mask {
/*                display: none; */
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.8);
            }
            .content .a {
                height: 400px;
            }
        </style>
    </head>
    <body>
        <div class="scroll">
            <div class="mask"></div>
            <div class="content">
                <div class="a">1</div>
                <div class="a">2</div>
                <div class="a">3</div>
            </div>
        </div>
    </body>
</html>

查看全文

相关阅读:
最长上升子序列(矩形嵌套)
中国剩余定理模板poj1006
POJ 2891 扩展欧几里德
 2015多校联赛第三场(部分题解)
树链剖分
 深度理解链式前向星
 POJ 1228 Grandpa's Estate(凸包)
旋转卡壳(一)
最小圆覆盖 hdu 3007
半平面求交模板

原文地址：https://www.cnblogs.com/tllw/p/10782349.html