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

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>

标签： javascriptjquerycssscrolltouch

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>