垂直滚动时水平滚动页面的JavaScript鼠标滚轮事件

我试图检测用户何时在固定高度的元素上向上或向下滚动，并相应地更新元素的transform:translateX CSS值，以向左或向右滚动内容。但是，我不知道如何从增量中获得正确的值

document.getElementById("list").addEventListener("wheel", myFunction);

function myFunction(event) {
  var matrix = $('.gallery-list').css('transform').split(/[()]/)[1];

  var y = parseInt(event.deltaY);
  var posX = parseInt(matrix.split(',')[4]);

  console.log(y);
  console.log(posX);
  console.log(y + posX);

  //$('.gallery-list').css('transform', 'translateX('+posX + y+'px)');
}

这里有一个代码笔：

将其添加到css中：

.outside {
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  position: absolute;
}

在gallery list div周围环绕以下内容：

<div id="outside" class="outside">

希望这有帮助：

我建议使用total-=y，这样在向下滚动时，库列表会向左滑动。

document.getElementById("outside").addEventListener("wheel", myFunction);

var total = 0;

function myFunction(event) {
  var y = parseInt(event.deltaY);

  total += y;

  $(".gallery-list").css('transform', 'translateX(' + total + 'px)');
}