2020.12.18

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