写个简单的小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';
})