cssで要素を部分的にスクロールさせる

画面内の一部の要素だけスクロールにする方法をご紹介します。

こちらのコードをコピペするだけで実装できます。任意でwidthやheightを指定してください◎

See the Pen
yLabwEa by nanami (@nanami_po)
on CodePen.

スマホのときだけ要素の中身をスクロールにしたい場合は、メディアクエリで指定すればOK

@media screen and (min-width:768px)
.scroll01 {
width: 200px;
height: 100px;
white-space: nowrap;
overflow-x: scroll;
}
.scroll02 {
width: 200px;
height: 100px;
overflow-y: scroll;
}
}


この時、デバイスによってはスクロールバーが表示されないこともありますので｢scroll｣のテキストを入れておくといいかもしれません。

See the Pen
yLabwWM by nanami (@nanami_po)
on CodePen.

おまけ

たまにダミーテキストとして　□　が使われることがあるのですが、上記でご紹介したスクロールを実装しようとしたときに中身がこの”□”だとうまくいかないという不具合が起こったことがありました。うまくいかないな、というときは要素の中身も注意してみてください。