css怎么实现鼠标滚轮横向移动？

Question

现在有这么一个效果，x轴超出宽度就出现滚动条

想要实现鼠标滚轮滚动的效果(这里不讨论shift+滚轮和苹果鼠标等等的情况)

案例最小实现demo

<style>
  .horizontal-scroll-wrapper {
    width: 500px;
    display: flex;
    background: #abc;
    overflow-x: auto;
    gap: 10px;
  }

  .horizontal-scroll-wrapper>div {
    display: block;
    background: #cab;
    width: 100px;
    height: 250px;
    flex-shrink: 0;
  }
</style>

<div class="horizontal-scroll-wrapper">
  <div>item 1</div>
  <div>item 2</div>
  <div>item 3</div>
  <div>item 4</div>
  <div>item 5</div>
  <div>item 6</div>
  <div>item 7</div>
  <div>item 8</div>
</div>

网络有很多先做成竖向，然后容器旋转+子元素旋转的方式来实现，但基本都是正方形，如果是长方形就不行了

Answer 1

为什么通过 transform:rotate() 转向不能实现？只不过比较弯弯绕绕罢了，所以通过JS会比较方便。

🌰 通过CSS控制

🌰 通过JS控制