Overriding scroll function within only one element

Question

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!

I don't believe you can override the scroll behavior, only the scroll visibility; that's up to the browser. — Tejs, May 11 '11 at 19:17
I've seen in done, for example this site: http://www.vanityclaire.com/ also has up/down scrolling overwritten with left/right — Valchris, May 11 '11 at 19:18
That site isnt using 'scrolling' in the same sense that a browser does. That site is manipulating the margin of elements. — Tejs, May 11 '11 at 19:22

score 1 · Accepted Answer · answered May 12 '11 at 16:20

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.

Overriding scroll function within only one element

1 Answers1