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

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

javascript jquery html css

Javascript 我可以用JS禁用水平鼠标滚动吗？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在构建一个单页网站，它使用javascript在页面上垂直和水平导航，以查看不同的内容我希望用户能够上下滚动，但不能水平滚动（目前，用户可以在FireFox中水平滚动，看到他们不应该看到的内容，除非他们使用导航不幸的是，我不能使用overflow-x:hidden；因为它干扰了我正在使用的平滑滚动JS 我确实找到了一些脚本（如下）来禁用任何鼠标滚轮移动，但我只想禁用水平移动。有人能帮忙吗 document.addEventListener('DOMMouseScroll', functi

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

我希望用户能够上下滚动，但不能水平滚动（目前，用户可以在FireFox中水平滚动，看到他们不应该看到的内容，除非他们使用导航

不幸的是，我不能使用

overflow-x:

hidden；因为它干扰了我正在使用的平滑滚动JS

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

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

您只需使用css样式即可完成此操作

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

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


正文{overflow-x:hidden；}

我也遇到了同样的问题，“overflow-x:hidden”CSS技巧很好，但它不适用于Mac鼠标的水平滚动功能（仅限FF）。您拥有的代码工作正常，但显然会破坏垂直和水平滚动。我想您需要额外的一点来检查“e轴”财产。以下是我所拥有的：

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

希望这有帮助！

好吧，你的代码只在firefox中工作，所以这里有一个更通用的解决方案，但它也会扼杀垂直滚动，到目前为止我还不知道如何阻止它

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

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

$(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进行比较。

正如我所说的，不幸的是，我不能使用overflow-x:hidden；因为它会干扰我正在使用的平滑滚动JS。@Jay我认为除非编辑您，否则您无法以任何其他方式进行操作r smooth scroll JS。你能分享你的smooth scroll JS吗？我可以分享，但是CSS修复不起作用。我尝试了很多解决方案。我希望以前有人使用过DOMMouseScroll。但是谢谢你的帮助。可能重复的代码不会停止我的鼠标滚动。只是一个普通的PC鼠标对我不起作用。尝试停止tinybox打开时鼠标滚动。