Question

我要离开第一篇文章了。如果你帮我的代码，我会很高兴我正在制作我的主页布局，但我遇到了麻烦。

单击导航抽屉按钮时，我想要禁用主内容部分的滚动条我试过#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>

Answer 1

你希望用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>

单击标签时，我们在主体上切换一个禁用溢出的类，从而禁用滚动。

导航抽屉打开时如何隐藏滚动条

1 个答案: