导航抽屉打开时如何隐藏滚动条
问题描述：
我要离开第一篇文章。如果你帮我的代码，我会很高兴。
我正在做我的主页布局，但我遇到了麻烦。导航抽屉打开时如何隐藏滚动条
我想单击导航抽屉按钮时禁用主内容部分的滚动条。
我试过#drawer-toggle:checked~html{overflow:hidden}，但它不工作。
如果您有其他方法，请教我。
body,html{
\t margin:0 auto;
\t height:100%
}
footer{
\t height:40px;
\t line-height:40px;
\t text-align:center
}
footer,header{
\t background:#ccc;
\t display:table-row
}
header{
\t background:#000;
\t color:#fff;
\t height:50px;
\t line-height:50px;
\t padding-left:50px;
\t position:fixed;
\t top:0;
\t width:100%;
\t z-index:7
}
main{
\t background:#eee
}
#container{
\t margin-top:50px
}
#drawer{
\t background:#fff;
\t height:100%;
\t left:-300px;
\t overflow-x:hidden;
\t padding:10px;
\t top:0;
\t width:85%;
\t max-width:250px;
\t z-index:9
}
#drawer,#drawer-toggle-label{
\t position:fixed
}
#drawer-toggle{
\t display:none
}
#drawer-toggle:checked~#drawer{
\t left:0;
\t top:0
}
#drawer-toggle:checked~#drawer-toggle-label{
\t background:rgba(0,0,0,.54);
\t height:100%;
\t width:100%
}
#drawer-toggle-label{
\t background:rgba(0,0,0,0);
\t height:50px;
\t left:0;
\t top:0;
\t width:50px;
\t z-index:8
}
#drawer-toggle-label:active{
\t background:#5c6bc0
}
#drawer-toggle-label:before{
\t background:#fff;
\t box-shadow:0 5px 0 #fff,0 10px 0 #fff;
\t content:'';
\t height:2px;
\t left:16px;
\t position:absolute;
\t top:19px;
\t width:18px
}
#wrapper{
\t display:table;
\t width:100%;
\t height:100%
}<body>
<div id=wrapper>
<header>Header</header>
<div id=container>
<input type=checkbox id=drawer-toggle>
<label for=drawer-toggle id=drawer-toggle-label></label>
<nav id=drawer>
Drawer
<ul><li>Menu
<li>Menu
<li>Menu
</ul>
</nav>
<main>
<center>
<table style=height:1000px;width:640px;background:#fff>
<tr><td style=vertical-align:top>Main Contents
</table>
</center>
</main>
</div>
<footer>Footer</footer>
</div>
</body>
答
你希望实现与CSS的东西，被称为家长选择这是不可用，则不能选择纯CSS的点击的元素的父元素。您的~选择器仅在代码中选择同胞（具有相同父代的元素）。除此之外，你的代码有一些缺少撇号和未封闭的标签。我更新了代码，并随时添加了JavaScript解决方案。
var element = document.getElementById('drawer-toggle');
element.addEventListener('click', function(e) {
document.getElementsByTagName('body')[0].classList.toggle('hide-scroll');
})body, html {
margin:0 auto;
height:100%;
}
footer {
height:40px;
line-height:40px;
text-align:center
}
footer, header {
background:#ccc;
display:table-row
}
header {
background:#000;
color:#fff;
height:50px;
line-height:50px;
padding-left:50px;
position:fixed;
top:0;
width:100%;
z-index:7
}
main {
background:#eee
}
#container {
margin-top:50px
}
#drawer {
background:#fff;
height:100%;
left:-300px;
overflow-x:hidden;
padding:10px;
top:0;
width:85%;
max-width:250px;
z-index:9
}
#drawer, #drawer-toggle-label {
position:fixed
}
#drawer-toggle {
display:none
}
#drawer-toggle:checked~#drawer {
left:0;
top:0
}
#drawer-toggle:checked~#drawer-toggle-label {
background:rgba(0,0,0,.54);
height:100%;
width:100%
}
#drawer-toggle-label {
background:rgba(0,0,0,0);
height:50px;
left:0;
top:0;
width:50px;
z-index:8
}
#drawer-toggle-label:active {
background:#5c6bc0
}
#drawer-toggle-label:before {
background:#fff;
box-shadow:0 5px 0 #fff,0 10px 0 #fff;
content:'';
height:2px;
left:16px;
position: absolute;
top:19px;
width:18px
}
#wrapper {
display:table;
width:100%;
height:100%
}
.hide-scroll {
overflow: hidden;
}<div id="wrapper">
<header>Header</header>
<div id="container">
<input type="checkbox" id="drawer-toggle">
<label for="drawer-toggle" id="drawer-toggle-label"></label>
<nav id="drawer">
Drawer
<ul>
\t \t <li>Menu</li>
\t \t <li>Menu</li>
\t \t <li>Menu</li>
</ul>
</nav>
<main>
<center>
<table style="height:1000px;width:640px;background:#fff">
<tr><td style="vertical-align:top">Main Contents
</table>
</center>
</main>
</div>
<footer>Footer</footer>
</div>当点击标签，我们切换上禁用溢出，从而禁用滚动体类。
垂直或水平滚动条？此外，围绕您的属性值应用撇号。 – Roberrrt
当抽屉打开时，我不想滚动主内容 – user7295417