Touch-enabled Scroller With Snapping Support – snapscroll.js

Category: Javascript | February 22, 2018
Views Total:599 views
Official Page:Go to website
Last Update:February 22, 2018


Touch-enabled Scroller With Snapping Support – snapscroll.js


The snapscroll.js library lets you create a touch-enabled horizontal scroller that automatically snaps the current slide to its container after dragging or swiping.

How to use it:

Add slides to the scroller as these:

<div class="viewport">
  <div class="holder">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>

Import the minified version of the snapscroll.js into the document.

<script src="snapscroll.min.js"></script>

Create a new SnapScroll instance and initialize the scroller.

var _snapscroll = new SnapScroll();
var viewports = document.querySelectorAll('.viewport');

Customize the scroller by passing the following options object to the SnapScroll.

var _snapscroll = new SnapScroll({
    duration: 350,
    easing: 'ease',
    holderClass: 'holder',
    itemClass: 'item',
    refreshResize: true,
    refreshTimeout: 0,
    limitScroll: false

You Might Be Interested In:

One thought on “Touch-enabled Scroller With Snapping Support – snapscroll.js

  1. John

    There is an issue while tap on the gap between two tiles or the blank area of the scrollview.
    When tap it get scrolled automatically.


Leave a Reply