Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

以下示例适用于Chrome，也适用于Android上的Chrome，但是在iOS上，由于输入的焦点，它总是被传递到垂直滚动条，因此无法水平滚动。

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

Answer 1

我认为你最好采取旋转木马的方式，在你滑动时移动容器，而不是使用＆＃34; native＆＃34;滚动行为。

通过这种方式，您可以使用JS左右滑动DIV，并使用常规滚动向上和向下滚动。

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

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

2 个答案: