【CSS】横スクロールリスト

スポンサーリンク
スポンサーリンク

【CSS】横スクロールリスト

水平横スクロールリストの実装方法を紹介します。

See the Pen Untitled by atat 7 (@atat-7) on CodePen.

解説

スクロール時に要素を左端になるようにする

.horizontal_scroll_list {
  /* スクロール時に要素を左端に固定 */
  scroll-snap-type: x mandatory;
}

/* 各リストのスタイル */
.horizontal_scroll_list li {
  /* スクロール時に要素を左端に固定 */
  scroll-snap-align: start;
}

コメント

タイトルとURLをコピーしました