javascript - 包含垂直可滚动div的水平可滚动div在iOS上不会水平滚动

想象一个包含两个垂直滚动div的水平滚动div。
您应该水平滚动进行导航，然后在内部div中垂直滚动以读取内容。

/* MINIMAL RESET */
body, html {
  height: 100%;
  margin: 0;
  padding: 0;
}
* { box-sizing: border-box; }

<div style="
            overflow-x: scroll;
            white-space: nowrap;
            width: 100%;
            height: 100%;
            position: relative;
            background-color: black;
            ">
  <div style="
              width: 100%;
              height: 100%;
              left: 0%;
              top: 0px;
              margin: 0px;
              position: absolute;
              display: inline-block;
              background-color: green;
              ">
    <div style="
                width: 100%;
                height: 100%;
                overflow-y: scroll;
                ">
      <div style="
                  width: 100%;
                  height: 200%;
                  ">
      </div>
    </div>
  </div>
  <div style="
              width: 100%;
              height: 100%;
              left: 100%;
              top: 0px;
              margin: 0px;
              position: absolute;
              display: inline-block;
              background-color: blue;
              ">
    <div style="
                width: 100%;
                height: 100%;
                overflow-y: scroll;
                ">
      <div style="
                  width: 100%;
                  height: 200%;
                  ">
      </div>
    </div>
  </div>
</div>

在查看this question之后，我发现可以设置-webkit-overflow-scrolling : 'touch'，但是就我而言，我需要寻找另一种解决方案，因为在滚动结束时我会操纵水平滚动条，而在这种情况下touch-scroll确实会破坏它。

以下示例在Chrome以及Android上的Chrome上都可以正常运行，但是在iOS上，由于输入的焦点始终无法传递到水平滚动条上，因此无法水平滚动。

如何使iOS的水平div和垂直div都可滚动，使其工作方式与在Chrome中相同？

最佳答案

我认为您最好采用轮播方式，即在滑动时要移动容器，而不是使用“ native ”滚动行为。

这样，您就可以使用JS左右滑动DIV，并使用常规滚动上下滚动。