javascriptjquerycssjquery-scrollable

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.