更改移动设备上的滚动轴（触摸）

Question

我有一个可以水平滚动的容器。这是通过将容器旋转90度来完成的。但是，这只是一种视觉解决方法：visual水平滚动是通过physical垂直滚动完成的。在移动设备上，这非常违反直觉。

是否有任何方法可以操纵滚动行为，以便可以使用水平触摸手势来滚动容器？

这是容器的简化演示：

.item {
  background: black;
  height: 50px;
  width: 50px;
  margin: 5px;
}

.container {
  background: yellow;
  width: fit-content;
  height: 300px;
  overflow-y: scroll;
  transform: rotate(-90deg);
  transform-origin: top right;
}

<div class="container">

  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>

</div>

Answer 1

而不是使用变换，实际上将元素并排放置在flex容器中。

因为您不希望元素随容器大小而缩小，所以可以在项目上设置最小宽度：

.item {
  background: black;
  height: 50px;
  width: 50px;
  margin: 5px;
  min-width:50px;
}

.container {
  display:flex;
  background: yellow;
  width: 300px;
  overflow-x: scroll;
}

<div class="container">

  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>

</div>