jQuery Horizontal Cursor Scrolling

Question

I am trying to make a horizontal scroll system that uses the cursor.

The way it works is if the cursor's X position is at the very left of the screen, The page should be at 0% horizontal scroll.

If the cursor's X position is at the very right of the screen, The page should be at 100% horizontal scroll.

How can I achieve this?

Cheers!

Answer 1

You can get the position of the mouse pointer relative to the left of document with event.pageX and set the scroll using scrollLeft():

$(document).mousemove(function (e) {
    var winW = $(window).width(),
        docW = $(this).width(),
        i = docW / winW, //increment value
        x = (e.pageX - $(window).scrollLeft()) * i;

    $(window).scrollLeft(x);
});

See this demo: http://jsfiddle.net/m28EY/4