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);
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 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 Commented Oct 13, 2014 at 6:31
4 Answers
Reset to default 4I 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!
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;
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 paring the x-axis delta of wheel scroll to 0.
You can do it simply with css styles.
<body style=" overflow-x:hidden; ">
<style>
body { overflow-x:hidden; }
</style>