CSSだけで作るタッチスライダー / overflowプロパティ

この記事を読むのに必要な時間は約 6 分です。

トッド

overflowプロパティでスライダーを作ります。

overflowプロパティ利用することで、CSSだけで簡単なタッチスライダーを実装することができます。

overflowプロパティは、要素内に収まりきらない内容の表示方法を指定することができます。

用意されている値は、auto、visible、hidden、scroll、があります。

auto は、スクロールバーが表示されます。
visible は、overflowプロパティの初期値であり、要素に収まらない内容を表示します。
hidden は、要素に収まらない内容を表示しません。
scroll は、要素内に内容が収まるかどうかに関わらず、スクロールを表示します。

overflow: 値 ; の形式で記述されるコードは、水平方向、垂直方向、をまとめて指定したい場合に使用します。

もし、水平方向と垂直方向でoverflowプロパティの値を変更したい場合は、以下の画像のように指定します。

それぞれ、水平方向に対しては、overflow-xを、垂直方向には、overflow-yを使い分けます。

指定可能な値は、auto、visible、hidden、scroll、と、まとめて指定する形式と同じものが使えます。

以下にスライダーのサンプルを用意しました。

サンプル

CSSスライダー

HTML

<div class="container">
      <div class="sliderBox">
        <div class="slider">
          <div class="slide-item"></div>
          <div class="slide-item"></div>
          <div class="slide-item"></div>
          <div class="slide-item"></div>
          <div class="slide-item"></div>
          <div class="slide-item"></div>
          <div class="slide-item"></div>
          <div class="slide-item"></div>
        </div>
      </div>
    </div>

CSS

.container {
  width: 100%;
  padding: 0;
  margin: 0;
}
.sliderBox {
  width: 100%;
  height: 110px;
  margin: 0 auto;
/*水平方向にスクロール許可↓*/
  overflow-x: auto;
/*垂直方向は収まらない内容は表示しない↓*/
  overflow-y: hidden;
  background-color: #efefef;
}
/*スクロールバーのスタイル*/
.sliderBox:hover::-webkit-scrollbar {
  height: 7px;
  background-color: rgba(255, 255, 255, 0.2);
}
.sliderBox:hover::-webkit-scrollbar-thumb {
  background-color: lightskyblue;
  border-radius: 10px;
}
/*ここまで*/
.slider {
  width: 880px;
}
.slide-item {
  float: left;
  width: 100px;
  height: 100px;
  margin: 5px;
  background-color: lightsalmon;
  border-radius: 12px;
}

PCで観覧している方であれば表示されているかと思いますが、スクロールバーをカスタマイズすることも可能です。

詳しくは、CSSソース内でコメントアウトしている箇所を確認してください。