scrollが効かないときはheightを見直そう
スクロールが…効かない…だと！？
大方Webデザインが完了したのに、スクロールが効かなくて絶望したたくみです。
結論から言うとheightを指定してあげればOKでした。
…が、このheight指定がクセモノで…(´；ω；｀)ﾌﾞﾜｯ
それでは、イケてるデモを作りながら解説してきましょう！
イケてるデモを構築してoverflow: scrollが効かないのを再現
とりあえず、こんな感じのよくある3ペインビュー(チャットを想定)を作ってみます。
この赤枠のところがスクロール効かない箇所です。
それではソースを組みましょう。
| demo.htm | |
|---|---|
| 1 | <!doctype html> |
| 2 | <html lang="ja"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" |
| 6 | content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> |
| 7 | <meta http-equiv="X-UA-Compatible" content="ie=edge"> |
| 8 | <link href="style.css" rel="stylesheet"> |
| 9 | <title>スクロールが効かないデモ</title> |
| 10 | </head> |
| 11 | <body> |
| 12 | |
| 13 | <article> |
| 14 | |
| 15 | <nav> |
| 16 | <h1>社畜のチャット</h1> |
| 17 | <ul> |
| 18 | <li><a href="#">まめでっぽう☆れんしゃ</a></li> |
| 19 | <li><a href="#">きんきゅうだしゅつ</a></li> |
| 20 | <li><a href="#">きる・すいっち</a></li> |
| 21 | </ul> |
| 22 | </nav> |
| 23 | |
| 24 | <main> |
| 25 | |
| 26 | <section> |
| 27 | |
| 28 | <h1>投稿一覧</h1> |
| 29 | |
| 30 | <p>ええい、ライバル社の社畜どもは化け物か</p> |
| 31 | <p>社畜には残業を終わらせる性能はない、気の毒だが。</p> |
| 32 | <p>労働とは、常に二手三手先を読んで行うものだ</p> |
| 33 | <p>認めたくないものだな、自分自身の若いときの残業時間というものを</p> |
| 34 | <p>寝なければどうということはない</p> |
| 35 | <p>しかし私も社畜のはずだ、見えるぞ、私にも朝日が見える</p> |
| 36 | <p>見せて貰おうか、御社のタイムカードの記帳時刻とやらを</p> |
| 37 | <p>そうか、若いな。 目の前の仕事を置いて逃げたくなるのはわかるが、せめてお疲れ様ぐらいは言って逃げて欲しいものだな</p> |
| 38 | <p>PCの性能の違いが、コーディングの決定的差でないということを教えてやる</p> |
| 39 | <p>社長、私を誰だと思っている</p> |
| 40 | |
| 41 | </section> |
| 42 | |
| 43 | <form> |
| 44 | <textarea placeholder="社畜の渾身の一言おねがいします"></textarea> |
| 45 | </form> |
| 46 | |
| 47 | </main> |
| 48 | |
| 49 | |
| 50 | </article> |
| 51 | |
| 52 | </body> |
| 53 | </html> |
見事に社畜感を表していますね。涙がでてきそうです。(涙)
それでは、CSSを組んでいきます。
| style.css | |
|---|---|
| 1 | * { |
| 2 | margin: 0; |
| 3 | padding: 0; |
| 4 | box-sizing: border-box; |
| 5 | } |
| 6 | html, |
| 7 | body { |
| 8 | font-family: monospace; |
| 9 | font-size: 16px; |
| 10 | color: #444; |
| 11 | width: 100%; |
| 12 | height: 100%; |
| 13 | } |
| 14 | article { |
| 15 | display: flex; |
| 16 | max-width: 100%; |
| 17 | max-height: 100%; |
| 18 | overflow: hidden; |
| 19 | } |
| 20 | nav { |
| 21 | width: 320px; |
| 22 | background: #0f5ca0; |
| 23 | color: #fff; |
| 24 | } |
| 25 | nav h1 { |
| 26 | margin-top: 1rem; |
| 27 | margin-bottom: 2rem; |
| 28 | text-align: center; |
| 29 | } |
| 30 | nav li { |
| 31 | padding: 1rem; |
| 32 | } |
| 33 | nav li a { |
| 34 | text-decoration: none; |
| 35 | color: #fff; |
| 36 | } |
| 37 | main { |
| 38 | width: 100%; |
| 39 | height: 100%; |
| 40 | } |
| 41 | main section { |
| 42 | margin-left: 1rem; |
| 43 | overflow: scroll; /* ここのscrollが効かない */ |
| 44 | } |
| 45 | main section h1 { |
| 46 | margin: 1rem 0; |
| 47 | } |
| 48 | main section p { |
| 49 | min-height: 120px; |
| 50 | } |
| 51 | main form { |
| 52 | width: 100%; |
| 53 | position: fixed; |
| 54 | bottom: 0; |
| 55 | } |
| 56 | main form textarea { |
| 57 | width: 100%; |
| 58 | height: 72px; |
| 59 | font-size: 1.125rem; |
| 60 | } |
投稿しているメッセージのところだけスクロールしたいので、main sectionのところでscrollいれていますが、期待通りにうごきません。
それでは、スクロールするように修正しましょう。
たった1行を追加してスクロールできるようにする
なんと、たった1行追記するだけで動くようになります。
| style.css | |
|---|---|
| 1 | main section { |
| 2 | margin-left: 1rem; |
| 3 | overflow: scroll; /* ここのscrollが効かない */ |
| 4 | height: 100vh; /* これを追加 */ |
| 5 | } |
たったこれだけです。
ですが、ここに色々と罠があります。
100vh でいけるなら 100% でもいけるんじゃね！？ってことで 100% にすると動きません(経験談)
100vhの場合はブラウザの高さいっぱいを指定したことになりますが、
100%にするとコンテンツを含めた高さになるため main section すべての高さになります。
上記の違いがあるため、スクロールが効かなくなるのですね。
ちなみに、100vhではなく、固定長の400px や 500px などでもスクロールできるようになります。
固定長にできるのでしたら、こちらを使ったほうが楽ちんですね。
