Mousedown on body and drag the page up or down, like on a pdf

Question

How would I make it so I can mousedown on the body on my page, then drag the page up or down, like you can in a PDF?

Basically I want to be able to drag the whole page u

Answer 1

Define CSS classes to set cursor like pdf reader, closed hand when dragging to scroll and open hand when not scrolling.

.closehand {
    cursor: url(https://mail.google.com/mail/images/2/closedhand.cur), default !important;
}
.openhand {
    cursor: hand;
}

Define a div on page where the content to scroll is placed, and attach to event listeners. In the example (Variation of Francesco's answer) I use #draggable to link the div. mousemove will cause drag. mousedown will detect user starting scroll. click will detect user completing drag. I tried mouseup but that let the page snap back to initial position.

mouseout detects if user moves out of scrollable area while still holding mouse down.

var gesturesY = 0;
    var startPosition = 0;
    var isMouseDown = false;

    $('#draggable').mousemove( function (e) {
        gesturesY = parseInt(e.pageY, 10);
        if (isMouseDown) {
        $(this).removeClass('openhand');
        $(this).addClass('closehand');      
            window.scrollBy(0, startPosition - gesturesY);
            return false;
        }

    });

    $('#draggable').mousedown( function() {

        startPosition = gesturesY;
        isMouseDown = true;
        return false;
    });

    $('#draggable').click( function() {
        $(this).removeClass('closehand');
        $(this).addClass('openhand');
        isMouseDown = false;
        return false;
    });
    $('#draggable').mouseout( function() {
        $(this).removeClass('closehand');
        $(this).addClass('openhand');
        isMouseDown = false;
        return false;
    });