Smooth Touch-enabled jQuery Vertical Scroller Plugin - verticalScroller

File Size: 96.1 KB
Views Total: 2716
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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>

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

// rest the scroller

// destroy the scroller

Change log:


  • fixed


  • compatible with es 6.


  • fixed for firefox.


  • bugfixes.

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