要素からはみ出した部分のスクロールの対応4つ

2021-12-12

今回はスクロールの実装を4種類ご紹介します。

基本のHTML & CSS
縦スクロール（バーあり）
縦スクロール（バーなし）
横スクロール（バーあり）
横スクロール（バーなし）
まとめ

基本のHTML & CSS

4つのスクロールタイプを見ていきますが、すべてに共通するコードです。

次の項目からは、追加コードのみ記載しています。

追加CSSにはクラス名に番号が振ってありますが、適宜名前を変更してください。

<div class="box">
  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>

.box {
  width: 300px;
  height: 100px;
  background: #9AE66E;
}

縦スクロール（バーあり）

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

.box1 {
  overflow-y: scroll;
  overflow-x: hidden;
}

※スマホではスクロールを動かしていない時はバーが非表示になっているかもしれません。

縦スクロール（バーなし）

.box2 {
  overflow-y: scroll;
  -ms-overflow-style: none; /* IE, Edge */
  scrollbar-width: none; /* Firefox */
}

/* Chrome, Safari */
.box2::-webkit-scrollbar {
  display:none;
}

横スクロール（バーあり）

.box3 {
  overflow: scroll;
  white-space: nowrap;
  overflow-y: hidden;
}

※スマホではスクロールを動かしていない時はバーが非表示になっているかもしれません。

横スクロール（バーなし）

.box4 {
  overflow-x: scroll;
  white-space: nowrap;
  -ms-overflow-style: none; /* IE, Edge */
  scrollbar-width: none; /* Firefox */
}

/* Chrome, Safari */
.box4::-webkit-scrollbar {
  display:none;
}

まとめ

いかがでしたか？

スクロールが実装できると、限られたスペースでも多くの情報を入れることができます。

便利なのでぜひ活用してみてください。

最後までご覧いただきありがとうございました。