jq OVERSCROLL

Nice scrolling plugin

by secretgspot

HTML

<h1>jQuery.overscroll</h1>
    
    <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="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
            <li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
            <li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
             <li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
            <li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
            <li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
             <li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
            <li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
            <li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
             <li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
            <li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
            <li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
             <li><a id="link" href="javascript:void(0)">Click Me!</a></li><li class="no-drag">Can't drag me!</li><li></li><li class="alt"></li><li></li><li class="alt"></li>
            <li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
            <li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
             <li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
            <li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li...

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; }

JavaScript

$(document).ready(function(){
    $("#overscroll").overscroll();
});

/**
 * Overscroll v1.6.4
 *  A jQuery Plugin that emulates the iPhone scrolling experience in a browser.
 *  http://azoffdesign.com/overscroll
 *
 * Intended for use with the latest jQuery
 *  http://code.jquery.com/jquery-latest.js
 *
 * Copyright 2012, Jonathan Azoff
 * Dual licensed under the MIT or GPL Version 2 licenses.
 *  http://jquery.org/license
 *
 * For API documentation, see the README file
 *  http://azof.fr/pYCzuM
 *
 * Date: Thursday, October 10 2012
 */

/*jslint onevar: true, strict: true */

/*global window, document, setTimeout, clearTimeout, jQuery */

(function(global, dom, browser, math, wait, cancel, namespace, $, none){

    // We want to run this plug-in in strict-mode
    // so that we may benefit from any optimizations
    // strict execution
    'use strict';

    // The key used to bind-instance specific data to an object
    var datakey = 'overscroll',

    // runs feature detection for overscroll
    compat = (function(){
        var b  = $.browser, fallback,
        agent = browser.userAgent,
        style  = dom.createElement(datakey).style,
        prefix = b.webkit ? 'webkit' : (b.mozilla ? 'moz' : (b.msie ? 'ms' : (b.opera ? 'o' : ''))),
        cssprefix = prefix ? ['-','-'].join(prefix) : '';
        compat = { prefix: prefix, overflowScrolling: false };
        $.each(prefix ? [prefix, ''] : [prefix], function(i, prefix){
            var animator = prefix ? (prefix + 'RequestAnimationFrame') : 'requestAnimationFrame',
            scroller = prefix ? (prefix + 'OverflowScrolling') : 'overflowScrolling';

            // check to see if requestAnimationFrame is available
            if (global[animator] !== none) {
                compat.animate = function(callback){
                    global[animator].call(global, callback);
                };
            }

            // check to see if overflowScrolling is available
            if (style[scroller] !==...