html怎么让页面自动滚动系统,怎么让html页面固定住。失去滚动条

写个简单的小demo

关键点是设置html中body的overflow属性为hidden

Document

.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;

}

document.getElementById("inputDom").addEventListener("click",function(){

//设置页面的滚动为hidden

document.body.style.overflow = "hidden";

//灰色区域出现

document.getElementsByClassName('hiddenDiv')[0].style.display = 'block';

})