CSS溢出：某些元素中的auto不起作用

I have Ios mobile app and using WebKit Safari. I have an container with items. Container must swipe up/down. Elements inside container - left/right. The problem is, when i set overflow: auto; to both - and container and elements, when i swipe elements - they works. But if i want swipe the hole container (up/down), it don't. I need to swap elements and container too Please help!

我有Ios移动应用程序并使用WebKit Safari。我有一个带物品的容器。容器必须向上/向下滑动。容器内的元素 - 左/右。问题是,当我设置溢出: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;
}

1 个解决方案

#1

After a lot of testing I think I found a solution to what you mean. Here the green elements move left and right, and the whole red container moves up and down.

经过大量的测试后,我想我找到了解决你的意思的解决方案。这里绿色元素左右移动,整个红色容器上下移动。

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