我正在构建一个单页网站,该网站使用 javascript 在页面上垂直和水平导航以查看不同的内容。
我希望用户能够上下滚动,但不能水平滚动(目前,用户可以在 FireFox 中水平滚动并看到他们不应该看到的内容,除非他们使用导航。
不幸的是我不能使用overflow-x:
hidden;因为它干扰了我正在使用的平滑滚动 JS。
我确实找到了一些脚本(如下)来禁用任何鼠标滚轮移动,但我只想禁用水平移动。谁能帮忙?
document.addEventListener('DOMMouseScroll', function(e){
e.stopPropagation();
e.preventDefault();
e.cancelBubble = false;
return false;
}, false);
最佳答案
我也遇到了同样的问题,“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);
希望对您有所帮助!
关于javascript - 我可以用 JS 禁用水平鼠标滚动吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7511949/