结合 CSS 滚动捕捉使用垂直鼠标滚轮进行水平滚动

Question

我正在尝试将垂直鼠标滚轮用户输入映射到水平滚动，同时保持与本机 CSS 滚动捕捉的兼容性。如本代码笔中所述，让页面水平滚动非常容易：

https://codepen.io/alvarotrigo/pen/gOmgRzL

让它与本机 CSS 滚动捕捉一起工作，我遇到了困难，因为将 wheel 事件的 deltaY 添加到滚动容器的 scrollLeft 值的方法似乎不起作用。我尝试使用映射到其 deltaX 属性的原始 wheel 事件的 deltaY 调度自定义 wheel 事件，但显然该自定义 wheel 事件实际上并未触发滚动？这是我从原始 CodePen 派生的不成功的代码：

const scrollContainer = document.querySelector("main");

scrollContainer.addEventListener("wheel", (evt) => {
  if (evt.deltaY != 0) {
    evt.preventDefault();
    
    // Custom wheel event
    const myEvent = new WheelEvent("wheel", {
      ...evt,
      bubbles: true,
      deltaX: evt.deltaY,
      view: evt.view
    });
    // evt.srcElement.dispatchEvent(myEvent);
    
    scrollContainer.scrollLeft += evt.deltaY; // only works with scroll-snap disabled on main element
  } else {
    // console.log(evt);
  }
});

https://codepen.io/wandervogel/pen/zYJzjXZ?editors=0110

任何帮助将不胜感激。非常感谢。