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>

查看全文

相关阅读:
一个用css写出来的下拉菜单
 oracle创建新的用户创建序列并生成自动自增
 Ubuntu 16.04下安装网络流量分析工具 Wireshark
Ubuntu16.04安装PostgreSQL并使用pgadmin3管理数据库_图文详解
 http协议无状态中的 "状态" 到底指的是什么？！
Struts2使用流程
 hibernate创建一对多映射关系
 hibernate中创建一对一映射关系
 利用Hibernate进行数据库的增删改查
 Hibernate的简单流程

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