如何使用mousewheel库实现容器垂直滚轮操作触发横向滚动

可行解决方案 #

有两种成熟的实现方案可以满足需求：

方案1：适配现有jQuery插件逻辑 #

你当前的代码逻辑本身是可行的，出现异常大多是jquery.mousewheel.min.js加载失败或者不同浏览器下滚轮delta值兼容问题，可以调整为以下代码：

$(function() {
  $("#umm").on('mousewheel DOMMouseScroll', function(event) {
    // 兼容火狐浏览器的滚轮事件参数
    const delta = event.originalEvent.wheelDelta ? event.originalEvent.wheelDelta/120 : -event.originalEvent.detail/3;
    this.scrollLeft -= (delta * 30);
    event.preventDefault();
  });
});

CSS和HTML部分不需要修改，只要确保jquery.mousewheel.min.js的资源路径正确即可。

方案2：原生JS实现，无需额外插件 #

如果不想依赖第三方鼠标滚轮插件，可以直接用标准wheel事件实现，兼容性覆盖所有主流浏览器：

// 无需依赖jQuery mousewheel插件，保留原有jQuery引入也可正常运行
document.querySelector('#umm').addEventListener('wheel', function(event) {
  if (event.deltaY !== 0) {
    // 只响应垂直滚轮操作
    this.scrollLeft += event.deltaY;
    // 阻止默认的垂直滚动行为
    event.preventDefault();
  }
})

你可以根据自己的依赖情况选择方案，滚动速度可以通过调整代码里的系数（比如把event.deltaY改成event.deltaY * 1.5）来适配自己的交互需求。

内容的提问来源于stack exchange，提问作者Jake