2016-12-14 31 views
0

最初の投稿を残しています。私のコードを助けてくれれば嬉しいです。
ホームページのレイアウトを作っていますが、困っていました。ナビゲーションドロワーが開いているときにスクロールバーを非表示にする方法

ナビゲーションドロワーボタンをクリックするとメインコンテンツセクションのスクロールバーを無効にします。
私は#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>

+0

縦スクロールバーまたは横スクロールバー?また、属性値の前後にアポストロフィを適用します。 – Roberrrt

+0

私はスクロールしたくないメインの内容引き出しが開いているとき – user7295417

答えて

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> 
 
\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>

、我々はこのようなスクロールを無効にする、オーバーフローを無効に身体上のクラスを切り替えます。

関連する問題