如何使用 JavaScript 通过鼠标滚轮创建水平滚动

使用鼠标滚轮进行原生水平滚动对用户来说并非易事。不过，可以使用事件监听器来更改此行为。

实际上，有一些事件涉及滚动和鼠标滚轮，例如mousewheel和DOMMouseScroll。但这里我将使用滚轮事件。

因此，为了实现此行为，JavaScript 代码将如下所示：

element.addEventListener('wheel', (event) => {
  event.preventDefault();

  element.scrollBy({
    left: event.deltaY < 0 ? -30 : 30,
  });
});

element用户将滚动的 HTML 元素在哪里。

但你可能会问，为什么left是静态值？这是因为不同的浏览器会提供不同的值event.deltaY。所以最好只设置一个值，只在元素滚动到一侧或另一侧时变化。

结果：