CSSだけでお手軽なフリック&ドラッグスライダーを作る

今年のベスト映画はやっぱりガーディアン・オブ・ギャラクシーなminamiです。
左右にスクロールするスライダーのようなUIを作る機会は未だ多いですが、今回は主にタッチデバイスで便利なフリック&ドラッグで動くスライダーをCSSだけで作ります。
Amazonのスマートフォンサイトなどでも同じように実装されています。

作り方

PC用のブラウザではoverflow: autoやscroll を設定した要素の中にそれよりも大きな要素が含まれる場合、スクロールバーを表示させてスクロールすることができますが、iOSやAndroidなどのスマートフォン用のブラウザではうまくスライドしなかったり、スライドそのものができなかったりします。

今回ご紹介する方法だとCSSだけで慣性スクロールをつけることができます。

HTMLのマークアップは下記のようにしました。

<div class="slider-wrapper">
  <div class="slider">
    <div class="unit">
      <p class="img"><img src="" alt="" /></p>
      <p class="caption">キャプションです。</p>
    </div><!-- /.unit -->
    <div class="unit">
      <p class="img"><img src="" alt="" /></p>
      <p class="caption">キャプションです。</p>
    </div><!-- /.unit -->
    <div class="unit">
      <p class="img"><img src="" alt="" /></p>
      <p class="caption">キャプションです。</p>
    </div><!-- /.unit -->
    <div class="unit">
      <p class="img"><img src="" alt="" /></p>
      <p class="caption">キャプションです。</p>
    </div><!-- /.unit -->
    <div class="unit">
      <p class="img"><img src="" alt="" /></p>
      <p class="caption">キャプションです。</p>
    </div><!-- /.unit -->
  </div><!-- /.slider -->
</div><!-- /.slider-wrapper -->

cssは下記のようになります。

.slider-wrapper {
  width: 600px;
  padding: 5px;
  overflow-x: auto;
  overflow-y: hidden;
  background: #CCC;
}

.slider {
  width: 850px;
  -webkit-overflow-scrolling: touch;
}

.slider > * {
  -webkit-transform: translateZ(0px);
}

.slider-wrapper::-webkit-scrollbar {
  display: none;
  height: 0 !important;
}

.unit {
  float: left;
  width: 150px;
  margin: 0 0 0 5px;
  border: 1px solid #DDDDDD;
  background: #EFEFEF;
}

.unit:first-child {
  margin: 0;
}

.unit .img {
  text-align: center;
}

表示領域にはoverflow-x を設定します。IEの独自拡張としては昔から存在していたプロパティですが、CSS3で同じ名前のプロパティが追加されており、Chrome やFirefox などでも動作します。横方向にはみ出た要素をスクロールさせています。

スライド領域に下記を設定します。

-webkit-overflow-scrolling: touch;

これだけでタッチ&スワイプでの慣性スクロールが可能になります。Webkit系のブラウザ拡張ですが、iOS5以上のSafari やChrome、一部のAndroid 4系ブラウザやChrome でも動作しました。

.slider > * {
  -webkit-transform: translateZ(0px);
}

古い端末（iPhone3GS、iPhone4など）で処理が重くなるのを防ぐため、GPUアクセラレーションを有効にする措置です。

.slider-wrapper::-webkit-scrollbar {
  display: none;
  height: 0 !important;
}

Webkitの独自拡張で、スクロールバーの見た目をカスタマイズする疑似要素になります。今回はスクロールバーを非表示にしました。

まとめ

たったこれだけの記述でタッチ&スワイプを使ったスクロールが可能になります。JavaScriptを駆使して自前で重たいスクロールのアニメーションを実装していた過去が泣けてきます。スマートフォンに特化したサイトならば検討してみてもよいのではないでしょうか。