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 — Andrew Barber
– Andrew Barber, Commented Oct 10, 2011 at 13:47
That code doesn't stop mouse scrolling for me. Just a regular PC mouse — Jorge Orpinel Pérez
– Jorge Orpinel Pérez, Commented Oct 13, 2014 at 6:31

Michael Lehto · Accepted Answer · 2011-11-17 16:50:36Z

4

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!

answered Nov 17, 2011 at 16:50

Michael Lehto

564 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jorge Orpinel Pérez Over a year ago

Not working for me. Trying to stop h mouse scroll while tinybox is open.

Bence Darabos · Accepted Answer · 2013-10-15 10:37:30Z

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, 2013 at 10:37

answered Sep 25, 2013 at 20:49

Bence Darabos

212 bronze badges

Comments

nerdwithme · Accepted Answer · 2014-05-13 03:39:33Z

1

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.

answered May 13, 2014 at 3:39

nerdwithme

311 silver badge3 bronze badges

Comments

Carb0n1c · Accepted Answer · 2011-09-22 08:56:39Z

0

You can do it simply with css styles.

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

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

answered Sep 22, 2011 at 8:56

Carb0n1c

1922 silver badges7 bronze badges

3 Comments

Jay Over a year ago

As I said, unfortunately I can't use overflow-x: hidden; because it interferes with the smooth-scroll JS I'm using.

Carb0n1c Over a year ago

@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?

Jay Over a year ago

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.

Collectives™ on Stack Overflow

Can I disable a horizontal mouse scroll with JS?

4 Answers 4

1 Comment

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related