Question

我正在构建一个单页网站，该网站使用javascript在页面上垂直和水平导航以查看不同的内容。

我希望用户能够向上和向下滚动但不能水平滚动（目前用户可以在FireFox中水平滚动并查看除非他们使用导航，否则他们无法看到的内容。

不幸的是我无法隐藏overflow-x:;因为它干扰了我正在使用的平滑滚动JS。

我确实找到了一些脚本（下面）来禁用任何鼠标滚轮移动，但我只想禁用水平移动。有人可以帮忙吗？

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

Answer 1

我遇到了同样的问题，“overflow-x：hidden”CSS技巧很不错，但它不适用于Mac鼠标的水平滚动功能（仅限FF）。您拥有的代码工作正常，但显然会导致垂直和水平滚动。我认为你需要的额外位是检查“e.axis”属性。这就是我所拥有的：

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

希望有所帮助！

Answer 2

好吧，你的代码只能在firefox中运行，所以这里有一个更通用的解决方案，但它也会杀死垂直滚动，到目前为止我无法弄清楚如何阻止它。

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

Answer 3

经过一些实验，这段代码可以正常工作

$(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();
    }
});

这可以防止OSX魔术鼠标，触控板和默认箭头键在最新版本的safari，chrome和ff中引起horz滚动。

我不能声称这是最好的解决方案，但它确实有效。我担心它可能会导致性能问题，因为它将轮滚动的x轴增量与0进行比较。

Answer 4

您只需使用css样式即可。

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

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

我可以用JS禁用水平鼠标滚动吗？

4 个答案: