鍍金池/ 問答/HTML/ 怎么讓html頁面固定住。失去滾動條

怎么讓html頁面固定住。失去滾動條

請問怎么讓html頁面固定住。失去滾動條啊。這是蘋果頁面的一個效果。按了放大鏡屏幕就固定住了。圖片描述

width: 100%;
display: none;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
height: 100%;
z-index: 9999;
background: rgba(0,0,0,.4);
我把整個灰色的背景寫了這個css。沒啥用。。
回答
編輯回答
熊出沒

針對整個頁面的滾動條：

body {
    // 屏蔽水平滾動條
    overflow-x:hidden;
    // 屏蔽垂直滾動條
    overflow-y:hidden;
}

如果是頁面內(nèi)的某個元素產(chǎn)生了滾動條：

<style>
.test {
    width:200px;
    height:200px;
    
    // 可以在這邊設(shè)置滾動條
    overflow-x:hidden;
    overflow-y:hidden;
}

// 很明顯 .in 元素超出了 .test 的寬高
// 這個時候 .test 會出現(xiàn)滾動條
.test .in {
    width:300px;
    height:300px;
}
</style>
<div class='test'>
    <div class='in'></div>
</div>
2017年6月13日 15:47
編輯回答
我不懂

寫個簡單的小demo
關(guān)鍵點是設(shè)置html中body的overflow屬性為hidden

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .header{
            width: 100%;
            height: 100px;
            background-color: green;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .main{
            background-color: yellow;
            width: 100%;
            height: 1200px;
        }
        input{
            width: 400px;
            height: 30px;
        }
        .hiddenDiv{
            height: 100%;
            width: 100%;
            position: absolute;
            background-color: black;
            opacity: .3;
            display: none;    
        }
    </style>
</head>

<body>
    <div class="header">
        <input type="text" placeholder="請輸入你的值" id='inputDom' >
    </div>
    <div class="main">

    <div class="hiddenDiv"></div>

    </div>
    <script>
        document.getElementById("inputDom").addEventListener("click",function(){
            //設(shè)置頁面的滾動為hidden
            document.body.style.overflow = "hidden";
            //灰色區(qū)域出現(xiàn)
            document.getElementsByClassName('hiddenDiv')[0].style.display = 'block';
        })
    </script>
</body>
</html>
2017年2月13日 02:23
編輯回答
替身

既然是前端，怎么能不會F12

圖片描述

2017年1月15日 19:01
編輯回答
凹凸曼

設(shè)置body的css

width:100%;
height:100%;
overflow:hidden;
2017年2月28日 18:35
編輯回答
舊時光
overflow: hidden;
2017年12月26日 13:07