在移动设备上滚动谷歌浏览器时会出现一个白框

时间：2018-10-03 11:49:12

标签： javascript html css frontend

我正在一个网站上工作。 Link to website。您可以在Github上查看代码。 Link to code。 如果您不想这样做，请使用HTML和CSS。
HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
    <link rel="stylesheet" href="Assets/Style.css">
    <title>Vaibhav Acharya</title>
</head>
<body>
    <div class="notsp">Sorry! Your device is not supported. Try on a device with bigger width/height.</div>
    <div class="blur">
            <div class="mobnav">
                    <div class="mbtn mhomeI mactive" onclick="home()">Home</div>
                    <div class="mbtn maboutI" onclick="about()">About</div>
                    <div class="mbtn mcontactI" onclick="contact()">Contact</div>
                    <a href="Blog/index.html"><div class="mbtn">Blog</div></a>
            </div>
    </div>
    <div class="title"><span>Vaibhav Acharya</span></div>
    <nav>
        <div class="btn homeI active" onclick="home()"><span class="fa fa-home"></span></div>
        <div class="btn aboutI" onclick="about()"><span class="fa fa-info"></span></div>
        <div class="btn contactI" onclick="contact()"><span class="far fa-address-book"></span></div>
        <a href="Blog/index.html"><div class="btn"><span class="far fa-newspaper"></span></div></a>
    </nav>
    <div class="containers" id="home">
        <div class="heading">Home</div>
        Hey there, Blah blah Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est officiis similique exercitationem architecto provident totam reprehenderit ratione saepe laborum culpa quaerat illo temporibus molestias ducimus explicabo quas sequi quae ipsa, velit deleniti consequuntur! Soluta, non assumenda at esse sequi libero tempora perferendis rerum est nihil sunt pariatur atque dolorum, perspiciatis natus. Ipsa nemo velit dolorum laudantium est deserunt quae eligendi facere ut quo ab, saepe reiciendis nesciunt fugiat, eveniet odit et ratione sapiente veritatis? Ipsum totam sit quisquam dolor dolorum dignissimos qui, laudantium enim mollitia nisi omnis ea pariatur minima optio, libero, atque odio architecto itaque sed iusto officia. Libero vel provident assumenda officiis earum totam impedit sequi dolorem a aspernatur, veniam, consectetur, ducimus laudantium delectus excepturi. Sunt, repudiandae? Laudantium assumenda doloremque aliquid, aut, quas dolorum, excepturi culpa officia iste ratione maxime odit debitis nostrum est dolor. Molestias itaque sint officiis harum perspiciatis hic, fugit aliquid praesentium, unde a, eos quo delectus. Asperiores placeat voluptate itaque! Quae, delectus velit, aut at ea accusamus illum nisi veniam reiciendis quaerat repellendus quibusdam animi est sequi totam ipsa quidem inventore soluta veritatis accusantium assumenda fuga magnam a. Commodi hic eaque facilis doloribus illum voluptas quae ut impedit. Veniam amet fugiat quasi modi aspernatur!
    </div>
    <div class="containers" id="about">
        <div class="heading">About</div>
        Hey there, Blah blah Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est officiis similique exercitationem architecto provident totam reprehenderit ratione saepe laborum culpa quaerat illo temporibus molestias ducimus explicabo quas sequi quae ipsa, velit deleniti consequuntur! Soluta, non assumenda at esse sequi libero tempora perferendis rerum est nihil sunt pariatur atque dolorum, perspiciatis natus. Ipsa nemo velit dolorum laudantium est deserunt quae eligendi facere ut quo ab, saepe reiciendis nesciunt fugiat, eveniet odit et ratione sapiente veritatis? Ipsum totam sit quisquam dolor dolorum dignissimos qui, laudantium enim mollitia nisi omnis ea pariatur minima optio, libero, atque odio architecto itaque sed iusto officia. Libero vel provident assumenda officiis earum totam impedit sequi dolorem a aspernatur, veniam, consectetur, ducimus laudantium delectus excepturi. Sunt, repudiandae? Laudantium assumenda doloremque aliquid, aut, quas dolorum, excepturi culpa officia iste ratione maxime odit debitis nostrum est dolor. Molestias itaque sint officiis harum perspiciatis hic, fugit aliquid praesentium, unde a, eos quo delectus. Asperiores placeat voluptate itaque! Quae, delectus velit, aut at ea accusamus illum nisi veniam reiciendis quaerat repellendus quibusdam animi est sequi totam ipsa quidem inventore soluta veritatis accusantium assumenda fuga magnam a. Commodi hic eaque facilis doloribus illum voluptas quae ut impedit. Veniam amet fugiat quasi modi aspernatur!
    </div>
    <div class="containers" id="contact">
        <div class="heading">Contact</div>
        Hey there, Blah blah Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est officiis similique exercitationem architecto provident totam reprehenderit ratione saepe laborum culpa quaerat illo temporibus molestias ducimus explicabo quas sequi quae ipsa, velit deleniti consequuntur! Soluta, non assumenda at esse sequi libero tempora perferendis rerum est nihil sunt pariatur atque dolorum, perspiciatis natus. Ipsa nemo velit dolorum laudantium est deserunt quae eligendi facere ut quo ab, saepe reiciendis nesciunt fugiat, eveniet odit et ratione sapiente veritatis? Ipsum totam sit quisquam dolor dolorum dignissimos qui, laudantium enim mollitia nisi omnis ea pariatur minima optio, libero, atque odio architecto itaque sed iusto officia. Libero vel provident assumenda officiis earum totam impedit sequi dolorem a aspernatur, veniam, consectetur, ducimus laudantium delectus excepturi. Sunt, repudiandae? Laudantium assumenda doloremque aliquid, aut, quas dolorum, excepturi culpa officia iste ratione maxime odit debitis nostrum est dolor. Molestias itaque sint officiis harum perspiciatis hic, fugit aliquid praesentium, unde a, eos quo delectus. Asperiores placeat voluptate itaque! Quae, delectus velit, aut at ea accusamus illum nisi veniam reiciendis quaerat repellendus quibusdam animi est sequi totam ipsa quidem inventore soluta veritatis accusantium assumenda fuga magnam a. Commodi hic eaque facilis doloribus illum voluptas quae ut impedit. Veniam amet fugiat quasi modi aspernatur!
    </div>
    <div class="foot">&copy Vaibhav Acharya 2018</div>
    <div class="mobnavbtn" onclick="mobNav()"><span class="fa fa-bars"></span></div>
<script src="Assets/jquery-3.3.1.min.js"></script>
<script src="Assets/Script.js"></script>
</body>
</html>

CSS：

@import url('https://fonts.googleapis.com/css?family=K2D:100');
html, body{
    margin: 0%;
    padding: 0%;
    max-width: 100%;
}
body{
    background: linear-gradient(294deg, #9C27B0, #303F9F);
    background-attachment: fixed;
    color: white;
    font-family: 'K2D','Open Sans', sans-serif;
}
.notsp{
    display: none;
}
a{
    text-decoration: none;
    color: currentColor;
}
.blur{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0,0,0,0.8);
    z-index: 2;
    display: none;
}
.title{
    font-size: 2em;
    font-weight: 900;
    display: block;
    text-align: center;
    padding: 15px;
}
.title span{
    background-color: rgba(255,255,255,0.6);
    padding: 5px;
    border-radius: 10px;
    border-left: 10px solid rgba(255,255,255,0.6);
    cursor: pointer;
}
nav{
    display: block;
    margin: 0px;
    padding: 0px;
    text-align: center;
}
.btn{
    display: inline-block;
    font-size: 3em;
    padding: 5px;
    padding-left: 50px;
    padding-right: 50px;
    transition: 0.5s all ease;
    opacity: 0.3;
    cursor: pointer;
}
.btn:hover{
    opacity: 1;
}
.active{
    text-shadow: 0 0 016px white;
    opacity: 1;
}
.containers{
    background-color: rgba(255,255,255,0.4);
    min-height: 50vh;
    display: block;
    padding: 20px;
    font-size: 1.3em;
}
#about, #contact{
    display: none;
}
.heading{
    display: block;
    font-size: 2em;
    text-align: center;
    margin: 0px;
    padding: 10px;
    padding-top: 0px;
}
.foot{
    display: block;
    text-align: center;
    padding: 10px;
}
.mobnavbtn{
    position: fixed;
    bottom: 0;
    right: 0;
    background: linear-gradient(294deg, #9C27B0, #303F9F);
    z-index: 3;
    margin: 10px;
    padding: 15px;
    border-radius: 40%;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    cursor: pointer;
    display: none;
}
.mobnav{
    margin: 0px;
    padding: 0px;
}
.mbtn{
    display: block;
    padding: 5px;
    margin: 0px;
    font-size: 3.5em;
    text-align: center;
    background-color: rgba(255,255,255,0.6);
    cursor: pointer;
}
.mactive{
    background: linear-gradient(294deg, #9C27B0, #303F9F);
}
@media only screen and (max-width: 630px){
    nav{
        display: none;
    }
    .mobnavbtn{
        display: block;
    }
}
@media only screen and (max-width: 319px){
    div:not(.notsp), nav{
        display: none;
    }
    .notsp{
        display: block;
    }
}
@media only screen and (max-height: 550px){
    div:not(.notsp), nav{
        display: none;
    }
    .notsp{
        display: block;
    }
}


因此，当我尝试在移动设备（Google Chrome）上滚动它时，页面底部会出现一个白框。当我将手指从屏幕上移开时，它消失了。 这是一张图片： enter image description here 我想知道为什么会发生以及如何删除它？

1 个答案:

答案 0 :(得分：1)

问题是由于在主体上设置了此属性而引起的。 “背景附着物：固定；”。删除此属性即可对其进行修复。

相关问题
最新问题