我要离开第一个帖子。如果你能帮助我编写代码，我会很高兴。
我正在制作我的主页布局，但我遇到了麻烦。
我想在单击抽屉导航按钮时禁用主要内容部分的滚动条。
我试过 #drawer-toggle:checked~html{overflow:hidden} 但它不起作用。
如果有其他方法，请教教我。
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%
}<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>最佳答案
您希望通过称为 parent 选择器 的 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>
<li>Menu</li>
<li>Menu</li>
<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>当点击标签时，我们在主体上切换一个类来禁用溢出，从而禁用滚动。
关于html - 抽屉导航打开时如何隐藏滚动条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41138743/