Can I disable a horizontal mouse scroll with JS?

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);

possible duplicate of [Disable horizontal scroll with JavaScript](http://stackoverflow.com/questions/7503048/disable-horizontal-scroll-with-javascript) — Andrew Barber, Oct 10 '11 at 13:47
That code doesn't stop mouse scrolling for me. Just a regular PC mouse — Jorge Orpinel Pérez, Oct 13 '14 at 06:31

score 4 · Accepted Answer · answered Nov 17 '11 at 16:50

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!

Not working for me. Trying to stop h mouse scroll while tinybox is open. — Jorge Orpinel Pérez, Oct 13 '14 at 06:30

Bence Darabos · Answer 2 · 2013-10-15T10:37:30.767

1

Well, your code work only in firefox, so here is a more universal solution, but it's also kill the vertical scroll and so far I couldn't figure out how to stop that.

if(window.addEventListener){
window.addEventListener('DOMMouseScroll',wheel,false);}
function wheel(event){
event.preventDefault();
event.returnValue=false;}
window.onmousewheel=document.onmousewheel=wheel;

edited Oct 15 '13 at 10:37

answered Sep 25 '13 at 20:49

Bence Darabos

21
2

score 1 · Answer 3 · answered May 13 '14 at 03:39

After some experimentation, this bit of code works

$(window).bind('mousewheel', function(e){
    if(e.originalEvent.wheelDeltaX != 0) {
        e.preventDefault();
    }
});
$(document).keydown(function(e){
    if (e.keyCode == 37) { 
        e.preventDefault();
    }
    if (e.keyCode == 39) {
        e.preventDefault();
    }
});

This prevents the OSX magic mouse, track pad and default arrow keys from causing horz scrolling in safari, chrome and ff as of their latest release.

I can make no claim to this being the best solution, but it works. I fear it may cause performance issues as its comparing the x-axis delta of wheel scroll to 0.

score 0 · Answer 4 · answered Sep 22 '11 at 08:56

0

You can do it simply with css styles.

<body style=" overflow-x:hidden; ">

<style>
  body { overflow-x:hidden; }
</style>

answered Sep 22 '11 at 08:56

Carb0n1c

192
2
7

As I said, unfortunately I can't use overflow-x: hidden; because it interferes with the smooth-scroll JS I'm using. – Jay Sep 22 '11 at 09:03
@Jay I don't think you can do it any other way unless you edit your smooth-scroll JS. Could you share your smooth-scroll JS? – Carb0n1c Sep 22 '11 at 09:50
I can share it, but a CSS fix just isn't going to work. I've tried a bunch of solutions. I was hoping someone has used DOMMouseScroll before. But thanks for the help. – Jay Sep 22 '11 at 14:01

Can I disable a horizontal mouse scroll with JS?

4 Answers4

Linked