Scrolldrag

Alpha no velocity

by nicktheandroid

HTML

<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
    <p id="mouse">X</p>
    <div id="test">
        <p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>
        <p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>
        <p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>
        <p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>
        <p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>
        <p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>
        <p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>
        <p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>
        <p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>
    </div>

CSS

.cds {
            border: 1px solid Silver;
        }

#test p {
    font:24px/24px arial}

JavaScript

var gesturesX = 0;
var gesturesY = 0;

var startPosition = 0;
var velocity = 0;
var isMouseDown = false;

var timer;

function GetVelocity() {
    velocity = startPosition - gesturesY;
}

$(document).mousemove( function (e) {
    gesturesX = parseInt(e.pageX, 10);
    gesturesY = parseInt(e.pageY, 10);
    $("#mouse").html(gesturesY);
    if (isMouseDown) {
        window.scrollBy(0, startPosition - gesturesY);
        return false;
    }
});

$(document).mousedown( function() {
    startPosition = gesturesY;
    isMouseDown = true;
    timer = window.setTimeout(GetVelocity, 50);
});

$(document).mouseup( function() {
    isMouseDown = false;
    if (velocity != 0) {
        $Body = $("body");
        var distance = velocity * 10;
        var scrollToPosition = $Body.scrollTop() + distance;
        $Body.eq(0).animate({ scrollTop: scrollToPosition}, 1000);
        velocity = 0;
    }
    return false;
});

// create a ton of numbers to make the page long - below
  $("#test p").each(function (index) {
   
    $(this).prepend('<span class="commentnumber">' + index+1 +'</span>');
   });