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

【问题标题】：Horizontally scrollable div which contains vertical scrollable div will not scroll horizontally on iOS包含垂直可滚动 div 的水平可滚动 div 不会在 iOS 上水平滚动
【发布时间】：2016-06-26 10:26:54
【问题描述】：

想象一个可水平滚动的 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'，但在我的情况下，我需要寻找另一种解决方案，因为我在滚动结束时操作水平滚动条，而触摸滚动则在这个案子破了吧。

以下示例在 Chrome 和 Android 上的 Chrome 中运行良好，但在 iOS 上，由于输入的焦点，无法水平滚动，它总是传递到垂直滚动条上。

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

【问题讨论】：

你试过类似this吗？
您说您“在滚动结束时操纵水平滚动条，并且在这种情况下触摸滚动确实会破坏它”并且还提到“输入的焦点”。你能通过编辑你的minimal, complete, and verifiable example来显示这两个吗？
好吧，在你编辑之前代码少了……但是！我所说的操作的意思是在用户完成滚动后我必须更改滚动位置。

标签： javascript html ios css

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：