webkit-overflow-scrolling：触摸；方向改变问题答案

【问题标题】：webkit-overflow-scrolling: touch; orientation change issuewebkit-overflow-scrolling：触摸；方向改变问题
【发布时间】：2014-06-02 22:08:18
【问题描述】：

好的，所以我有一个具有指定宽度的固定位置 div。当内容足够长以至于需要在一个设备方向（横向）上溢出，但如果设备改变方向，另一个（纵向）滚动不会停止工作。

iOS7 出现此问题（无法测试以前的版本）

这里是例子的地址：https://r3dux.com/css/overflow.php

以下是该问题的说明：

【问题讨论】：

对我来说很好用。
是的，我在 iOS7 和 iOS6 中测试过，都运行良好。
奇怪，我已经在 iOS 模拟器、我的 iPhone 和 iPad 上测试过它（内容更多），当方向改变时它停止工作。
也许进入 Safari 并将您的用户代理更改为 iOS 设备用户代理，看看它是否正常工作。
它在桌面 safari 上运行良好......这不是问题。我不确定我是否了解更改用户代理会如何影响浏览器的这种行为。

标签： html ios css scroll mobile-safari

【解决方案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”，一切都会按预期工作。我只是为高度设置动画，这会触发滚动容器的重排/重绘。

【讨论】：

这能解决覆盖问题吗？（如果是固定 div 上的 div，则滚动到固定 div）
假设是这样的：

你的实际内容
天才好友。你救了我。非常感谢。