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

我要离开第一篇文章。如果你帮我的代码，我会很高兴。
我正在做我的主页布局，但我遇到了麻烦。导航抽屉打开时如何隐藏滚动条

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

来源

2016-12-14 user7295417

垂直或水平滚动条？此外，围绕您的属性值应用撇号。 – Roberrrt

当抽屉打开时，我不想滚动主内容 – user7295417

你希望实现与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>

当点击标签，我们切换上禁用溢出，从而禁用滚动体类。

来源

2016-12-14 09:46:59 Roberrrt

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

回答

相关问题