Q&A
teratail のバグだと思いますが、質問が途中で切れてしまっているようです。
前提・実現したいこと
下記は動作するサンプルです。
サンプル(Code Sand Box)
画面右上のopenボタンを押すことで、右からドロワーメニューを表示します。
画面の縦幅が狭い場合は、ドロワーメニューがはみ出てしまい、メニューの下が見えなくなります。
なので、画面からはみ出たらドロワーメニュー内をスクロールできるようにし、メニューをすべて見れるようにしたいです。
発生している問題・エラーメッセージ
ドロワーメニューが画面からはみ出ると、メニューの下の要素が見えなくなります。
該当のソースコード
html
1 <header> 2 <button id="open">open</button> 3 </header> 4 <aside id="side"> 5 <button id="close">close</button> 6 <nav> 7 <ul> 8 <li>A</li> 9 <li>B</li> 10 <li>C</li> 11 <li>D</li> 12 <li>E</li> 13 <li>F</li> 14 <li>G</li> 15 <li>H</li> 16 <li>I</li> 17 <li>J</li> 18 <li>K</li> 19 </ul> 20 </nav> 21 </aside>
css
1* { 2 box-sizing: border-box; 3} 4 5body { 6 margin: 0; 7 background-color: #333; 8} 9 10header { 11 background-color: #999; 12 padding: 1em; 13} 14 15button { 16 cursor: pointer; 17} 18 19header button { 20 display: block; 21 margin-left: auto; 22} 23 24aside { 25 background-color: #999; 26 width: 200px; 27 position: fixed; 28 right: -100vw; 29 top: 0; 30 padding: 1em; 31 transition: 0.3s; 32} 33 34aside.open { 35 right: 0; 36} 37 38aside ul { 39 margin: 0; 40 padding: 0; 41 list-style: none; 42} 43 44aside li:nth-of-type(n + 2) { 45 border-top: 1px solid white; 46}
試したこと
ドロワーメニューのulに下記のスタイルを設定することで、スクロールできるようになりました。
css
1aside ul { 2 height: 90vh; 3 overflow-y: auto; 4}
しかし、一番下までスクロールした際、画面サイズによってはみ出たリストの見え具合が異なります。
また、極端に画面幅を狭めれば、やはりはみ出した分のリストが見えなくなります。
上記のheightの値を小さくするほどスクロールできるようになりますが、逆にリストが画面内に収まった際に、リストが途切れた表示になります。
教えていただいてありがとうございます。「編集」を押したら途切れてた文章が残っていたので、terateilのバグっぽいです。こんなことあるんですね。
回答でも結構頻出するんですよね……
回答2件
0
こういうやり方もあります。
html
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <style> 9 * { 10 box-sizing: border-box; 11 } 12 13 body { 14 margin: 0; 15 background-color: #333; 16 } 17 18 header { 19 background-color: #999; 20 padding: 1em; 21 } 22 23 button { 24 cursor: pointer; 25 } 26 27 header button { 28 display: block; 29 margin-left: auto; 30 } 31 32 aside { 33 background-color: #999; 34 width: 200px; 35 position: fixed; 36 right: -100vw; 37 top: 0; 38 padding: 1em; 39 transition: 0.3s; 40 overflow-y: auto; 41 } 42 43 aside.open { 44 right: 0; 45 } 46 47 aside ul { 48 margin: 0; 49 padding: 0; 50 list-style: none; 51 } 52 53 aside li:nth-of-type(n + 2) { 54 border-top: 1px solid white; 55 } 56 </style> 57</head> 58 59<body> 60 <header> 61 <button id="open">open</button> 62 </header> 63 <aside id="side"> 64 <button id="close">close</button> 65 <nav> 66 <ul> 67 <li>A</li> 68 <li>B</li> 69 <li>C</li> 70 <li>D</li> 71 <li>E</li> 72 <li>F</li> 73 <li>G</li> 74 <li>H</li> 75 <li>I</li> 76 <li>J</li> 77 <li>K</li> 78 </ul> 79 </nav> 80 </aside> 81 <script> 82 document.getElementById("open").onclick = () => { 83 document.getElementById("side").classList.add("open"); 84 }; 85 86 document.getElementById("close").onclick = () => { 87 document.getElementById("side").classList.remove("open"); 88 }; 89 90 const sideScroll = () => { 91 const windowHeight = window.innerHeight; 92 side.style.height = windowHeight + "px"; 93 } 94 95 window.addEventListener("load", () => { 96 if (window.innerHeight < 330) sideScroll(); 97 }); 98 99 window.addEventListener("resize", () => { 100 window.innerHeight < 330 ? sideScroll() : side.style.height = ""; 101 }); 102 103 104 </script> 105</body> 106 107</html>
投稿2020/12/22 08:13
総合スコア1373
0
ベストアンサー
こんばんは。
こちらをお試しいただいてよろしいでしょうか？
css
1aside { 2 display: flex; 3 flex-direction: column; 4 height: 100vh; 5} 6nav { 7 flex-shrink: 1; 8 overflow-y: auto; 9 height: 100%; 10}
投稿2020/12/22 07:45
総合スコア36960
あなたの回答
tips
プレビュー
