怎么让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。没啥用。。

javascript css html

阅读 7.8k

5 个回答

灰色v碰触

✓ 已被采纳

针对整个页面的滚动条：

body {
    // 屏蔽水平滚动条
    overflow-x:hidden;
    // 屏蔽垂直滚动条
    overflow-y:hidden;
}

如果是页面内的某个元素产生了滚动条：

<style>
.test {
    width:200px;
    height:200px;
    
    // 可以在这边设置滚动条
    overflow-x:hidden;
    overflow-y:hidden;
}

// 很明显 .in 元素超出了 .test 的宽高
// 这个时候 .test 会出现滚动条
.test .in {
    width:300px;
    height:300px;
}
</style>
<div class='test'>
    <div class='in'></div>
</div>

j_bleach

2.5k52234

发布于
2017-12-22

更新于
2017-12-22

overflow: hidden;

smallmarkone

1831510

发布于
2017-12-22

设置body的css

width:100%;
height:100%;
overflow:hidden;

悦和

19273652

发布于
2017-12-22

写个简单的小demo
关键点是设置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(){
            //设置页面的滚动为hidden
            document.body.style.overflow = "hidden";
            //灰色区域出现
            document.getElementsByClassName('hiddenDiv')[0].style.display = 'block';
        })
    </script>
</body>
</html>