Mobile Friendly Content Scroller with jQuery - Sonatra Hammer Scroll

Sonatra Hammer Scroll is a jQuery plugin for making any container element scrollable with a custom scrollbar that supports mouse drag, touch gestures and inertial scrolling.

How to use it:

1. Load the necessary jQuery library and the hammer.js in your document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/hammer.js/1.1.3/hammer.min.js"></script>

2. Load the jQuery Sonatra Hammer Scroll plugin after jQuery library.

<script src="js/hammer-scroll.js"></script>

3. Add the data-hammer-scroll="true" attribute to a container element where you wish to turn it into a scollable area.

<div class="content" data-hammer-scroll="true">
  <p>The paragraph 1.</p>
  <p>The paragraph 2.</p>
  <p>The paragraph 3.</p>
  <p>The paragraph 4.</p>
  <p>The paragraph 5.</p>
  ...
</div>

4. Style the custom scrollbar in the CSS as you like.

.hammer-scrollbar {
  display: none;
  float: right;
  width: 3px;
  height: 100%;
  background-color: #000000;
  margin-right: 2px;
  opacity: 0.32;
  z-index: 1000;
  border-top-right-radius: 2px;
  border-top-left-radius: 2px;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 2px;
}

.hammer-scrollbar.hammer-scroll-active { display: block; }

.hammer-scrollbar.hammer-scroll-inverse {
  left: 2px;
  right: inherit;
}

---

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