どうも7noteです。スクロール関連のCSS

ページ内にスクロールできる要素の作り方です。

スクロールボックスの作り方

共通のHTML

index.html

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

縦向きスクロールボックス

style.css

.box {
  width: 200px;                /* 横幅を200pxに指定 */
  height: 200px;               /* 横幅を200pxに指定 */
  border: 1px solid #000;      /* わかりやすくボーダーを引く */
  overflow-y: scroll;          /* 縦方向にスクロール可能にする */
}

横向きスクロールボックス

style.css

.box {
  width: 200px;                /* 横幅を200pxに指定 */
  height: 200px;               /* 横幅を200pxに指定 */
  border: 1px solid #000;      /* わかりやすくボーダーを引く */
  overflow-x: scroll;          /* 横方向にスクロール可能にする */
}
.box p {
  width: 400px;                /* 親要素よりも大きくする */
}

スクロールバーを非表示にする

style.css

.box {
  -ms-overflow-style: none;    /* IE, Edge 対応 */
  scrollbar-width: none;       /* Firefox 対応 */
}
.box::-webkit-scrollbar {  /* Chrome, Safari 対応 */
  display:none;
}