ScrollDrag

With Working Velocity

by nicktheandroid

HTML

<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<script src="http://jquery.offput.ca/js/jquery.timers.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

//New Tests
var gesturesX = 0;
var gesturesY = 0;

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

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) {
        var scrollToPosition = startScrollTop + (startPosition - gesturesY);
        $("body").scrollTop(scrollToPosition);
        return false;
    }
});


// if (isMouseDown) {
//     window.scrollBy(0, startPosition - gesturesY);
//     return false;
// }







$(document).mousedown(function() {
    if ($("body").is(':animated')) {
        $("body").stop(true, false).trigger('mouseup');
    }
    startPosition = gesturesY;
    startScrollTop = $("body").scrollTop();
    isMouseDown = true;
    timer = window.setTimeout(GetVelocity, 50);
    $(document).everyTime(50, function(i) {

        velocity = startPosition - gesturesY;

    });
});

$(document).mouseup(function() {
    isMouseDown = false;
    if (velocity !== 0) {
        $Body = $("body");
        var distance = velocity * 10;
        var scrollToPosition = $Body.scrollTop() + distance;
        $Body.eq(0).stop().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>');
});