iOS上具有垂直滚动的水平滚动div将无法在水平方向上滚动。

Question

想象一个可以水平滚动的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>

在查看这个问题后，我发现可以设置-webkit-overflow-scrolling : 'touch'，但在我的情况下，由于在滚动结束时操作水平滚动条，因此在此情况下触摸滚动会导致它失效。

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

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

- Frederik Witte

---

你尝试过类似这个的东西吗？ - Chris W.

你说过当滚动条到达结束位置时，你会“操作水平滚动条，而触控滚动在这种情况下会破坏它”，并且提到了“输入的焦点”。你能否通过编辑你的 最小完整可验证示例来展示这两个问题？ - gfullam

好的，在你编辑之前代码更少了...但是！ 我所说的操作是指在用户完成滚动后必须更改滚动位置。 - Frederik Witte

Answer 1

您需要将所有的overflow-*AXIS*替换为简单的overflowauto：

<div style="overflow: auto; 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: auto;">
           <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: auto;">
           <div style="width: 100%; height: 200%;"></div>
        </div>
     </div>
  </div>

- Undefitied

Answer 2

我认为你最好采用旋转木马（轮播）方法，即使用滑动移动容器而不是使用“原生”滚动行为。

这样，你就能够通过JS向左或向右滑动DIV，并使用常规滚动上下滚动。

- justinledouxweb