[SOLVED] Overriding scroll function within only one element

Overriding scroll function within only one element

I'm using jquery to provide clickable overlays, I'd like to replace the default Scroll up/down methods with left/right (So when you scroll the page it moves horizontally not vertically. I'm worried about the scroll function still working as intended within the overlays.

Update: If it's not possible to scroll the browser what about a div that has a horizontal scroll bar that on scroll up/down moves left to right (as well as anchors)

My JavaScript experience is somewhat limited, any guidance with this matter would be greatly appreciated Thanks!

Solution

Found an appropriate solution with: http://plugins.jquery.com/project/ScrollTo my code:

function shiftScroll(offset) {
    console.log('current:' + window.pageXOffset);
    console.log('currentY:' + window.pageYOffset);
    $(window).scrollTo(window.pageXOffset + offset, window.pageYOffset, {axis:'x'});
}

I still need to disable the vertical scroll bars in the body, while not disabling the vertical scroll bars in elements within the page.