< 更新ツイートしてます
2020.12.18 
2022.1.9
2022.1.9 cssで要素を部分的にスクロールさせる
- 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.
おまけ
たまにダミーテキストとして □ が使われることがあるのですが、上記でご紹介したスクロールを実装しようとしたときに中身がこの”□”だとうまくいかないという不具合が起こったことがありました。うまくいかないな、というときは要素の中身も注意してみてください。
Share Please
Read this too
