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

本文转载自查看原文 2019-04-28 10:09 1230

如果想遮罩层内容下的内容不滚动，需要去掉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>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 vue 遮罩层阻止默认滚动事件 vue 遮罩层阻止默认滚动事件 vue解决遮罩层滚动方法解决遮罩层上方元素可以滚动禁止遮罩层下方滚动问题 web页面弹出遮罩层,通过js或css禁止蒙层底部页面跟随滚动微信小程序中遮罩层的滚动穿透问题解决van-overlay遮罩内容不能上下滚动的问题 vue 内容增加滚动条自动定位至底部 ElementUI dialog 遮罩层全部遮罩问题 HTML 弹出遮罩层一（遮罩层和内容标签嵌套）