關於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 彈出遮罩層一（遮罩層和內容標簽嵌套）