Smooth Touch-enabled jQuery Vertical Scroller Plugin - verticalScroller

A simple and mobile-friendly jQuery vertical scroller plugin that makes your long content scrollable when it overflows its parent container with a specified height. It also comes with a smooth scroll animation and interacts with mouse wheel and touch swipe events.

How to use it:

1. Include the jQuery verticalScroller plugin after the jQuery script. For a better performance load them at the bottom of your page.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.verticalScroller.js"></script>

2. Wrap your long content into a container.

<div class="wrapper">
  <div class="container">
    <p>Paragraph 1-1</p>
    <p>Paragraph 1-2</p>
    <p>Paragraph 1-3</p>
    <p>Paragraph 1-4</p>
    <p>Paragraph 1-5</p>
    ...
  </div>
</div>

3. Set the height to the wrapping element and make it 'overflow: hidden;'.

.wrapper {
  height: 300px;
  overflow: hidden;
}

.container {
  position: relative;
}

4. Just call the function and done.

var wrap = new verticalScroller()

5. Plugin's default options.

var wrap = new verticalScroller({

    // CSS selectors
    wrapper: '.wrapper',
    container: '.container',

    // animation speed
    duration: 0.6,

    // custom easing animtion
    cssEasing: 'cubic-bezier(0.165, 0.840, 0.440, 1.000)',
    jsEasing: 'linear'
    
})

6. Public methods.

var wrap = new verticalScroller()

// update the scroller
wrap.update();

// rest the scroller
wrap.reset();

// destroy the scroller
wrap.destroy();

Change log:

2017-03-21

• fixed

2016-12-05

• compatible with es 6.

2016-11-30

• fixed for firefox.

2016-11-17

• bugfixes.

---

This awesome jQuery plugin is developed by artprojectteam. For more Advanced Usages, please check the demo page or visit the official website.