html - CSS 溢出 : auto in some elements don't work

Question

我有 Ios 移动应用程序并使用 WebKit Safari。我有一个装有元素的容器。容器必须向上/向下滑动。容器内的元素 - 左/右。问题是，当我设置 overflow: auto;对于两者 - 以及容器和元素，当我滑动元素时 - 它们都有效。但是如果我想滑动孔容器(向上/向下)，它不会。我也需要交换元素和容器请帮忙!

<div id="container">
         <div id="data-container">
              <div class="left-right">
                  <div class="some-content"></div>
              </div>
              <div class="left-right">
                  <div class="some-content"></div>
              </div>
              <div class="left-right">
                  <div class="some-content"></div>
              </div>
          </div>
    </div>




#container{
   height: 100px;
   width: 200px;
}
#data-container{
   height: 500px;
   width: 200px;
   overflow-y: auto;
}
.left-right{
   height: 50px;
   width: 300px;
   overflow-x: auto;
}

Answer 1

经过大量测试，我想我找到了解决您的意思的方法。这里 green 元素左右移动，整个 red 容器上下移动。

    #container {
      background: blue;
      height: 100px;
      width: 200px;
      overflow-x: hidden;
    }
    #data-container {
      background: red;
      height: 500px;
      width: 200px;
      white-space: nowrap;
      overflow: auto;
    }
    .left-right {
      background: green;
      overflow-x: auto;
    }
    .some-content {
      width: 300px;
      height: 50px;
    }

<div id="container">
  <div id="data-container">
    <div class="left-right">
      <div class="some-content">LEFT-RIGHT A</div>
    </div>
    <div class="left-right">
      <div class="some-content">LEFT-RIGHT B</div>
    </div>
    <div class="left-right">
      <div class="some-content">LEFT-RIGHT C</div>
    </div>
    ONLY UP AND DOWN
  </div>
</div>