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!
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