水平滚动的div无法使用鼠标滚轮进行滚动。

Question

我有一个水平滚动的div，使用Mac触控板导航非常轻松，但使用鼠标时却是一场噩梦。用户必须点击并拖动页面底部的滚动条才能浏览内容。

我已经尝试了从这个帖子中实施多种解决方案，但至今没有一种能在我代码中奏效。

这里是一个使用其中一种JavaScript解决方案的jsfiddle链接。使用触控板可以轻松水平滚动，但仍然无法通过鼠标滚轮进行水平滚动。

我需要确保解决方案不会破坏触控板滚动体验，只是使得同时也能用鼠标滚轮滚动。例如，我发现如果用户仅按住Shift键，他们可以用鼠标滚轮或触控板完美地滚动。也许一个权宜之计是编写一些代码，强制用户在页面上的整个时间都按下Shift键？听起来像是个愚蠢的变通方法。还是更愿意使用能正常工作的JavaScript。

以下是我在尝试使用的代码——

请注意，我已经移除了与本问题无关的所有图片等元素。而且我并不寻求CSS解决方案。谢谢！

编辑： 另外需要注意的是，用户在任何网页上都不会进行垂直滚动。也许这会让解决方案变得更简单？

编辑2： 这张图片显示了当我尝试在这篇回答中提供的代码时出现的错误……只有当我按住Shift键时，我的内容才会随着垂直鼠标滚轮进行水平滚动……

moinudin · Answer

我没有Mac电脑或触控板，所以你必须测试这些理论，但你的代码确实支持鼠标滚轮，所以唯一剩下的问题就是触控板问题。可能e.preventDefault();阻止了触控板进行水平滚动。

解决方案1： 如果你的触控板已经触发了水平滚动事件，那么当e.deltaX有值（不同于0）时，尝试不要阻止事件。

if (e.deltaX == 0) { 
    // 这个滚动不是水平的
    // 仍要阻止它，并手动调整scrollLeft
      if (e.deltaY > 0) {
        container.scrollLeft += 100;
        e.preventDefault();
      }
      else {
        container.scrollLeft -= 100;
        e.preventDefault();
      }
    }
    // 否则让水平滚动正常工作

解决方案2： 如果解决方案1不符合你的需求，那么尝试完全删除e.preventDefault();行。你已经说过用户将完全不会进行垂直滚动，所以我们实际上不需要这一行。如果你想要确保没有垂直滚动的意外情况，我们可以在HTML元标签中添加以下内容来防止：

可选地，你可以禁止缩放：

并为body元素设置一些样式以确保无误：


  一些页面内容

这样应该足以防止垂直滚动，而不必在JavaScript中阻止。

编辑：
关于你的评论，是的，你的代码对我有效。假设每个页面只有一个horizontalstorecontainer，你可以将事件监听器添加到document而非container以获得更好的效果：

const container = document.getElementById("horizontalstorecontainer");
// where "container" is the id of the container
document.addEventListener("wheel", function (e) { // edit this line <--
    if (e.deltaY > 0) {
      container.scrollLeft += 100;
      e.preventDefault();
// prevenDefault() will help avoid worrisome 
// inclusion of vertical scroll 
    }
    else {
      container.scrollLeft -= 100;
      e.preventDefault();
    }
  }, {passive: false}); // try this if you are getting my error below

我遇到了一个错误“Unable to preventDefault inside passive event…”并添加{passive: false}解决了我的问题，但我不确定这是否与你的问题有关，或者这是否会破坏你可能有的其他事件/代码。

这对于具有overflow-x: scroll;的容器有效。运行此代码后，网页停止滚动，只有我的容器会随着滚轮水平滚动。已在Chrome上测试过。

也许你可以通过在函数开始处添加console.log(e);来调试此事件，看看事件是否对你的鼠标滚轮有效触发，并且你可以查看是否得到了你想要的deltaY值。如果事件完美触发，请检查container，看为何它没有移动。