Question

I am building a one page site that uses javascript to navigate vertically and horizontally across the page to see different content.

I want the user to be able to scroll up and down but not horizontally (currently the user can scroll horizontally in FireFox and see content they shouldn’t be able to see unless they use the navigation.

Unfortunately I can’t use overflow-x: hidden; because it interferes with the smooth-scroll JS I am using.

I did find some script (below) to disable any mouse wheel movement but I only want to disable the horizontal movement. Can anyone help?

document.addEventListener('DOMMouseScroll', function(e){
    e.stopPropagation();
    e.preventDefault();
    e.cancelBubble = false;
    return false;
}, false);

Answer 1

I ran into this same problem as well, the “overflow-x:hidden” CSS trick is nice, but it doesn’t work for the horizontal scrolling capability of the Mac Mouse (FF only). The code you have works fine, but obviously kills both vertical and horizontal scrolling. I think the extra bit you need there is to check the “e.axis” property. Here’s what I have:

document.addEventListener('DOMMouseScroll', function(e) { 
    if (e.axis == e.HORIZONTAL_AXIS) {
        e.stopPropagation(); 
        e.preventDefault();
        e.cancelBubble = false; 
    }
    return false;
}, false);

Hope that helps!