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

Question

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

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

这里是容器的简化演示：

.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

不使用转换，而是将元素并排放置在弹性容器中。

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

.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>

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

Change scroll axis on mobile devices (touch)

javascript

css

jquery

scroll

touch