JS: Kinetic scrolling

based upon: https://gist.github.com/eklimcz/1104526 more at: http://blogs.claritycon.com/design/2011/07/building-a-touch-friendly-html5-site/ helpers: http://ariya.github.com/js/kinetic

HTML

<script src="http://employees.claritycon.com/eklimczak/html5/TouchFriendly/js/modernizr2.js"></script>
<div id="wrapper">
    <div id="scroller">
        <ul id="thelist">
            <li>Pretty row 1</li>
            <li>Pretty row 2</li>
            <li>Pretty row 3</li>
            <li>Pretty row 4</li>
            <li>Pretty row 5</li>
            <li>Pretty row 6</li>
            <li>Pretty row 7</li>
            <li>Pretty row 8</li>
            <li>Pretty row 9</li>
            <li>Pretty row 10</li>
            <li>Pretty row 11</li>
            <li>Pretty row 12</li>
            <li>Pretty row 13</li>
            <li>Pretty row 14</li>
            <li>Pretty row 15</li>
            <li>Pretty row 16</li>
            <li>Pretty row 17</li>
            <li>Pretty row 18</li>
            <li>Pretty row 19</li>
            <li>Pretty row 20</li>
            <li>Pretty row 21</li>
            <li>Pretty row 22</li>
            <li>Pretty row 23</li>
            <li>Pretty row 24</li>
            <li>Pretty row 25</li>
            <li>Pretty row 26</li>
            <li>Pretty row 27</li>
            <li>Pretty row 28</li>
            <li>Pretty row 29</li>
            <li>Pretty row 30</li>
            <li>Pretty row 31</li>
            <li>Pretty row 32</li>
            <li>Pretty row 33</li>
            <li>Pretty row 34</li>
            <li>Pretty row 35</li>
            <li>Pretty row 36</li>
            <li>Pretty row 37</li>
            <li>Pretty row 38</li>
            <li>Pretty row 39</li>
            <li>Pretty row 40</li>
        </ul>
    </div>
</div>

CSS

</style>
<meta name='viewport' content='width=device-width'>
<style>
body,ul,li {
	padding:0;
	margin:0;
	border:0;
}
body {
	-webkit-user-select:none;
    -webkit-text-size-adjust:none;
	font-family:helvetica;
}


#wrapper {
	position:absolute; z-index:1;
	top:0; bottom:0; left:0;
	width:100%;
	background:#aaa;
	overflow:hidden;
}

#scroller {
	position:absolute; z-index:1;
/*	-webkit-touch-callout:none;*/
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	width:100%;
	padding:0;
}

#scroller ul {
	list-style:none;
	padding:0;
	margin:0;
	width:100%;
	text-align:left;
}

#scroller li {
	padding:0 10px;
	height:40px;
	line-height:40px;
	border-bottom:1px solid #ccc;
	border-top:1px solid #fff;
	background-color:#fafafa;
	font-size:14px;
}

JavaScript

;(function($, window, document) {
    $.event.props.push("touches");

    var browser_width = $(window).width(),
        browser_height = $(window).height();

    window.requestAnimFrame = (function(w) {
        return w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.mozRequestAnimationFrame || w.oRequestAnimationFrame || w.msRequestAnimationFrame ||
        function(callback, element) {
            return w.setTimeout(callback, 1000 / 60);
        };
    }(window));

    var pluginName = "scroller",
        defaults = {
            ease: 0.3,
            threshold: 0.01,
            velocity: 0.3,
            direction: "y",
            useTouch: "ontouchend" in document
        },

        helpers = {
            isTouch: "ontouchend" in document,
            has3d: ('WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix())
        },

        events = {
            touch: {
                start: "touchstart",
                move: "touchmove",
                end: "touchend touchcancel"
            },

            mouse: {
                start: "mousedown",
                move: "mousemove",
                end: "mouseup mouseleave"
            }
        }["ontouchend" in document ? "touch" : "mouse"];

    $.fn.getMatrix = function(i) {
        var matrix = this.css('transform');
        if(matrix === "none" || matrix === undefined) return 0;
        var array = matrix.split('(')[1].split(')')[0].split(',');
        return array[i] || array;
    };

    var _mouseDown = false,
        _prevMouseX = 0,
        _prevMouseY = 0,
        _lastX, _lastY,
        _roundedViewportX = 0,
        _roundedViewportY = 0,
        _targetX = 0,
        _curVelX = 0,
        _curVelY = 0,
        _curInertiaX = 0,
        _curInertiaY = 0,
        _direction = 0,
        _directionY,
        _viewPortMax = 0,
        _viewPortMin = 0,
        _lastMotion, _didDrag = false,
        _selectorType = 'img',
        _clickElement;

        var viewPortX =...