ドロワーメニューが画面からはみ出たら、ドロワーメニューをスクロールして全てのメニューがみられるようにしたい。

前提・実現したいこと

下記は動作するサンプルです。
サンプル(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の値を小さくするほどスクロールできるようになりますが、逆にリストが画面内に収まった際に、リストが途切れた表示になります。

Lhankor_Mhy

2020/12/22 06:28

teratail のバグだと思いますが、質問が途中で切れてしまっているようです。

evgenia

2020/12/22 06:31

教えていただいてありがとうございます。「編集」を押したら途切れてた文章が残っていたので、terateilのバグっぽいです。こんなことあるんですね。

Lhankor_Mhy

2020/12/22 06:40

回答でも結構頻出するんですよね……

行動規範の内容に同意します

回答2件

こういうやり方もあります。

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

Jon_do

総合スコア1373

ベストアンサー

こんばんは。

こちらをお試しいただいてよろしいでしょうか？

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

Lhankor_Mhy

総合スコア36156

evgenia

2020/12/22 08:00

実現したいことが実現できました。ありがとうございました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！