導航抽屜打開時如何隱藏滾動條

我要離開第一篇文章。如果你幫我的代碼，我會很高興。
我正在做我的主頁佈局，但我遇到了麻煩。導航抽屜打開時如何隱藏滾動條

我想單擊導航抽屜按鈕時禁用主內容部分的滾動條。
我試過#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

導航抽屜打開時如何隱藏滾動條

回答

相關問題