jQuery

【jQuery】タッチデバイス対応の水平スクロールを簡単に実装できるOverflow Scroller

February 5, 2017
Overflow Scroller

Overflow ScrollerはCSSとJavaScriptのシンプルなパッケージでoverflow: autoにより、タッチデバイス対応でスワイプ可能。デスクトップデバイスでは、スクロールを制御する前後の矢印を持つように拡張されています。

THE MARKUP

      <div class="overflow-scroller">
      <div class="child-item">...</div>
      <div class="child-item">...</div>
      <div class="child-item">...</div>
      ....
      </div>

THE SCRIPT

  1. scrollPercentage
  2. scrollSpeed
  3. snapPoints
      <script> 
      $('.overflow-scroller').overflowScroller();

      //passing options
      $('.overflow-scroller').overflowScroller({
      scrollPercentage: .9,
      scrollSpeed: 400,
      snapPoints: false
    });
    </script>