Prevent horizontal touch pad scrolling on macbooks

Question

does anybody know how to stop track pads from scrolling horizontally?

My website has a deliberate overflow which you navigate using some javascript scrollbars.

http://www.mitchellop.com

However, if viewed on a mac using firefox the twofinger touch pad scroll allows you to move horizontally even though the x-overflow is hidden.

Any ideas?

thanks.

Answer 1

I ran into this issue myself with a project I'm working on. Firefox has some pretty strange events when it comes to certain kinds of scrolling. A little digging turned up the MozMousePixelScroll event. Here's the code I used to squelch the horizontal two-finger scrolling:

window.addEventListener('MozMousePixelScroll', function(evt){
    if(evt.axis === evt.HORIZONTAL_AXIS){
        evt.preventDefault();
    }
}, false);

Answer 2

Instead, you could move the inside content by either positioning relatively, and changing the left value, or using CSS transforms (which don't require a repaint, and are hence quicker).

This may or may not require lots of rewriting, but it will work.