iPhone-Like Dragging and Scrolling Plugin with jQuery - Overscroll

Overscroll is a jQuery plugin that allows you to create iPhone/iPad like scrolling effect on DOM elements of your page for using in a desktop browser. It adds a draggable drift to overflowed DOM elements as well as a set of fading 'thumbs'.

Basic Usage:

1. The HTML

<div id="overscroll">
<ul>
<li></li>
<li class="alt"></li>
<li></li>
<li class="alt"></li>
<li></li>
<li class="alt"></li>
<li></li>
<li class="last"></li>
</ul>
</div>

2. The CSS

#overscroll {
width: 500px;
height: 500px;
overflow: hidden;
border: solid 1px #000;
margin: 30px auto;
position: relative;
}
#overscroll ul {
width: 2500px;
margin: 0;
padding: 0;
}
#overscroll li {
display: block;
float: left;
width: 100px;
height: 100px;
background-color: #FFF;
}
#overscroll li.alt {
background-color: #C00;
}
#overscroll li.no-drag {
background-color: #000;
color: #FFF;
}
#overscroll li.last {
clear: both;
visibility: hidden;
height: 0;
padding: 0;
}

3. Include jQuery library and Overscroll.js on your page

<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script src="jquery.overscroll.js"></script> 

4. Fire the jQuery plugin

<script>
$(function(o){
o = $("#overscroll").overscroll({
cancelOn: '.no-drag', 
captureWheel: false,
hoverThumbs: true,
persistThumbs: true,
showThumbs: false,
scrollLeft: 200,
scrollTop: 100
}).on('overscroll:dragstart overscroll:dragend overscroll:driftstart overscroll:driftend', function(event){
console.log(event.type);
});
});
</script> 

Settings:

jQuery.fn.overscroll.settings = {
    captureThreshold:   3,   // The number of mouse move events before considering the gesture a "drag"
    driftDecay:         1.1, // The linear-friction coefficient for drift decay (must be > 1)
    driftSequences:     22,  // The number of animation frames to constrain a drift to
    driftTimeout:       100, // The amount of time to imply the user is no longer trying to drift (in ms)
    thumbOpacity:       0.7, // The default active opacity for the thumbs
    thumbThickness:     6,   // The thickness, in pixels, of the generated thumbs
    thumbTimeout:       400, // The amount of time to wait before fading out thumbs
}

Change log:

v1.7.7 (2014-02-12)

• update.

---

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