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

最新推荐文章于 2022-06-02 11:58:09 发布

dixiaotuo3231

最新推荐文章于 2022-06-02 11:58:09 发布

阅读量627

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/tllw/p/10782349.html

版权

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

转载于:https://www.cnblogs.com/tllw/p/10782349.html

dixiaotuo3231

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于vue遮罩层和底部内容滚动的问题

如果想遮罩层内容下的内容不滚动，需要去掉html,body的滚动条，自己设置滚动区域，设置height为100vh，遮罩层fixed定位<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></titl...
复制链接

扫一扫