WebKit-Overflow-Scrolling: Touch;方向改变问题

Question

好的，我有一个固定位置的 div，它有指定的宽度。当内容足够长以至于在一种设备方向（横屏）需要溢出，但在另一种方向（竖屏）不需要时，如果设备更改方向，则滚动将停止工作。

这个问题发生在 iOS7 上（无法测试之前的版本）

以下是示例地址：https://r3dux.com/css/overflow.php

以下是该问题的说明：

- CJT3

---

对我来说，它运行良好。 - David Corbin

是的，我在iOS7和iOS6上进行了测试，两者都完美地工作了。 - David Corbin

显然，如果在方向更改时重新绘制div，则它会再次工作。（切换显示：块;到显示：无;然后返回到显示：块;）-真的很烦恼需要这样做。 - CJT3

我有同样的问题。 - czuendorf

我目前也遇到了同样的问题。iOS（仅当应用程序从主屏幕保存并启动时）会忽略元素的z-index顺序（下面的元素被滚动）。即使在设备方向改变后，它也能按预期工作，甚至在切换回来后也是如此。 你找到解决这个问题的方法了吗？（padding-bottom的方法不能解决这个问题） - Aides

Answer 1

我用CSS修复了那个问题。

@media (orientation: landscape) {
  .webkit-scroll-container > * {
    -webkit-animation: fixWebkitOverflowScroll 1s;
  }

  @-webkit-keyframes fixWebkitOverflowScroll
  {
    0% {padding-bottom: 1px;}
    100% {padding-bottom: 0px;}
  }
}

只需将其放入样式表中，分配类“.webkit-scroll-container”，一切都会按预期工作。我只是动画高度，这会触发滚动容器的重排/重绘。

- czuendorf

---

这个修复了重叠问题吗？（如果有一个div覆盖在固定的div上，滚动会到达固定的div） - CJT3

假设有这样的代码：<div class="scroll" style="-webkit-overflow-scrolling:touch;"><div class=".content">你的实际内容</div></div> - czuendorf

天才伙计。你救了我。非常感谢。 - Mayank Tripathi