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

Question

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

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

不幸的是我不能使用overflow-x: hidden;因为它干扰了我正在使用的平滑滚动 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);

希望对您有所帮助!