横に1行で並べるスクロール可能なリストをCSSのみで表現

はじめに

横に1行で並べるリストは「カルーセル」が有名で、多数のパッケージやライブラリが存在します。
一方で、スマートフォンでの操作はスワイプになるので、単純にスクロールできるだけで良い場合もあります。

以下では、横にスクロールができるメニューを作る想定でサンプルを紹介します。

リストを横に並べる

まず、リストを横に並べます。

<ul class="horizontal-list__list">
  <li class="horizontal-list__item">item1</li>
  <li class="horizontal-list__item">item2</li>
  <li class="horizontal-list__item">item3</li>
  ...
</ul>

ul {
  /* reset ul */
  margin: 0;
  padding: 0;
}

.horizontal-list {
  &__list {
    display: flex;
  }
  &__item {
    display: block;
    padding: 10px 20px;
    font-size: 20px;
    line-height: 1.5;
  }
}

画面幅を超えない範囲で表示するようにする

このままメニューを増やしていくと、画面幅を超えた時に、 ウィンドウ内で スクロールが発生してしまいます。
はみ出ないようにして、このメニューリストの中だけでスクロールするように overflow-x: scroll のスタイルを追加します。

また、iOS Safariはこのままだと、カクカクしたスクロールになるため、なめらかに動かせるように -webkit-overflow-scrolling: touch; も追加します。

.horizontal-list {
  &__list {
    display: flex;
    overflow-x: scroll; /* 追加 */
    -webkit-overflow-scrolling: touch; /* 追加。 iOS Safariでスクロールに慣性をもたせる */
  }
  ...
}

padding-bottomでスクロールバーの位置を調整する

overflow-x: scroll を追加したことで、ほぼ目的は達成できていますが、スクロールバーがリストの下部にかぶってしまいます。

下部にかb

見た目的に気になるので、リストに padding-bottom を設定してあげます。

.horizontal-list {
  &__list {
    display: flex;
    overflow-x: scroll;
    padding-bottom: 20px; /* 追加(デザインにもよるので値は適宜で) */
  }
  ...
}

リストの高さと同じ高さを持ったDOMでwrapしスクロールバーを消す

これで、基本的には完成なのですが、そもそもスクロールバーがデザイン上不要というケースもあるかと思います(個人的には必要派ですが、ニーズとしてあります)。

その場合は、このリストをwrapするDOMを作り、リストと同じ高さでかつはみ出た部分は隠すようなスタイルをつけるとスクロールバーが消えます。

<div class="horixontal-list__wrap"> <!-- 追加 -->
  <ul class="horizontal-list__list">
    <li class="horizontal-list__item">item1</li>
    <li class="horizontal-list__item">item2</li>
    <li class="horizontal-list__item">item3</li>
    ...
  </ul>
</div>

.horizontal-list {
  /* 追加 */
  &__wrap {
    height: 50px; /* 中の要素の高さと同じ高さにして */
    overflow: hidden; /* はみ出たpadding-bottom分は非表示にする */
  }
  ...
}

PCも考慮する場合

今回はスマートフォンのスワイプ操作を想定していますが、PC(特にWindows)の場合は、スクロールバーがないとスクロールが直感的にできないので、PCまでレスポンシブで対応させる場合は、ブレイクポイント
を決めて、メディアクエリでPC用のスタイルを用意するか、JSでブラウザを検知して、左右のナビゲーションアイコンを実装するなど工夫が必要になります。

さいごに

これまでの流れをもとに作ったサンプルは以下です。
https://codepen.io/aktuehr/pen/povjpXP

実際はリンクを設定したり、カルーセルのように画像が配置されたりと行った事がありますので、これをベースにDOMを変更し、スタイルをアップデートすると簡易的なカルーセルができるかと思います。