Create Elastic Over scroll Bounce Effect In jQuery - overscroll

overscroll is a lightweight jQuery plugin which used CSS3 3D transforms to create an elastic over scroll "bounce" effect as you seen on most mobile devices. Also provided as an AngularJS directive which can be implemented in your AngularJS based web applications.

How to use it:

1. Load the needed jQuery and lodash JavaScript libraries in the document.

<script src="lodash.js"></script>
<script src="jquery.min.js"></script>

2. Create a scrollable container as follows:

<div id="container">
  ...
</div>

#container {
  height: 500px;
  width: 300px;
  overflow: scroll;
}

3. Just call the function on the container element and done.

$('#container').overScroll();

4. Possible plugin options.

$('#container').overScroll({

  // If set this true, over-scroll effect will appear in DOM element itself. otherwise child elements
  self: false,

  // enable horizontal scroll
  horizontal: false
  
});

5. Events.

$('#container').on('overScrolledTop', function() {
  // fires when over-scrolled top of element few pixels.
});

$('#container').bind('overScrolledBottom', function() {
  // fires when over-scrolled bottom of element few pixels.
});

Change log:

2016-07-19

• ignore when using safari

---

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