cre8cre8
AskMe♥

scrollが効かないときはheightを見直そう

スクロールが…効かない…だと!?
大方Webデザインが完了したのに、スクロールが効かなくて絶望したたくみです。
結論から言うとheightを指定してあげればOKでした。
…が、このheight指定がクセモノで…(´;ω;`)ブワッ
それでは、イケてるデモを作りながら解説してきましょう!

イケてるデモを構築してoverflow: scrollが効かないのを再現

とりあえず、こんな感じのよくある3ペインビュー(チャットを想定)を作ってみます。
デモhtmlでスクロールができないことを確認する画面
この赤枠のところがスクロール効かない箇所です。
それではソースを組みましょう。

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}
6html,
7body {
8  font-family: monospace;
9  font-size: 16px;
10  color: #444;
11  width: 100%;
12  height: 100%;
13}
14article {
15  display: flex;
16  max-width: 100%;
17  max-height: 100%;
18  overflow: hidden;
19}
20nav {
21  width: 320px;
22  background: #0f5ca0;
23  color: #fff;
24}
25nav h1 {
26  margin-top: 1rem;
27  margin-bottom: 2rem;
28  text-align: center;
29}
30nav li {
31  padding: 1rem;
32}
33nav li a {
34  text-decoration: none;
35  color: #fff;
36}
37main {
38  width: 100%;
39  height: 100%;
40}
41main section {
42  margin-left: 1rem;
43  overflow: scroll; /* ここのscrollが効かない */
44}
45main section h1 {
46  margin: 1rem 0;
47}
48main section p {
49  min-height: 120px;
50}
51main form {
52  width: 100%;
53  position: fixed;
54  bottom: 0;
55}
56main form textarea {
57  width: 100%;
58  height: 72px;
59  font-size: 1.125rem;
60}

投稿しているメッセージのところだけスクロールしたいので、main sectionのところでscrollいれていますが、期待通りにうごきません。
それでは、スクロールするように修正しましょう。

たった1行を追加してスクロールできるようにする

なんと、たった1行追記するだけで動くようになります。

style.css
1main section {
2  margin-left: 1rem;
3  overflow: scroll; /* ここのscrollが効かない */
4  height: 100vh; /* これを追加 */
5}

たったこれだけです。
ですが、ここに色々と罠があります。
100vh でいけるなら 100% でもいけるんじゃね!?ってことで 100% にすると動きません(経験談)
100vhの場合はブラウザの高さいっぱいを指定したことになりますが、
100%にするとコンテンツを含めた高さになるため main section すべての高さになります。
上記の違いがあるため、スクロールが効かなくなるのですね。
ちなみに、100vhではなく、固定長の400px や 500px などでもスクロールできるようになります。
固定長にできるのでしたら、こちらを使ったほうが楽ちんですね。

≪ 前の記事
rbenvで入れたRubyを全ユーザが使えるようにする
次の記事 ≫
vagrant上のdockerにapache立ててホストOSからポートフォワーディングでアクセス

いいねやコメントを送っていただけると中の人がしっぽ振って大喜びします♪

あなたへのおすすめの記事