IOS Phonegap：横向到纵向中断溢出-x

Question

我遇到了一个问题，无法轻松解决，因为仅在一种情况下出现：当我在我的页面上并且我在 iOS 上从横向切换到纵向时。 我的应用程序是一个 Phonegap 应用程序，它使用 Angular 和插件设备方向来使其与我的响应式 CSS 一起工作。

一切都很好，除了这部分。 我有一个水平菜单，如果溢出，我将无法滚动它。

这是我的代码：

CSS

nav.inline {
    background: #e4eeef;
    outline: 1px solid #e4eeef; /* Safari bug rendering */
    overflow: hidden;
    overflow-x: scroll;
    text-transform: uppercase;
    -webkit-overflow-scrolling: touch;
}
nav.inline ul {
    list-style: none;
    min-width: 102%;
    padding: 0 2%;
    width: 102%;
    white-space: nowrap;
}
nav.inline ul li {
    display: inline-block;
    white-space: nowrap;
}
nav.inline ul a {
    border-bottom: 4px solid transparent;
    border-top: 4px solid transparent;
    color: #4b8c95;
    display: inline-block;
    font-size: 1.7em;
    font-weight: bold;
    line-height: 80px;
    margin: 0 0.7em;
}
nav.inline ul a.active {
    border-bottom: 4px solid #4b8c95;
}

HTML

<nav class="fullwidth inline" ng-include="'partials/nav.html'"></nav>

和部分关联

<ul data-snap-ignore="true">
    <li><a ng-click="setTab('link1')">Link 1</a></li>
    <li><a ng-click="setTab('link2')">Link 2</a></li>
    ...
</ul>

您可以看到“data-snap-ignore”，因为我将 angular-snap.js 用于另一个菜单（左侧菜单），并且我不希望他在我滑动这个菜单时出现（这部分运行良好）。

感谢您的帮助；）

Answer 1

是的，这很糟糕。这是一个错误，AFAICT。

到目前为止，我发现修复它的唯一机制是将容器上的 display 从 none 切换到 block，如下所示：

var navElement = document.getElementsByTagName("nav")[0]; navElement.style.display = "none"; setTimeout ( function() { navElement.style.display = "block"; }, 0 );

在我看来，这*看起来 * 很糟糕，但它确实恢复了滚动功能。

因为，据我所知，如果其中的元素强制容器滚动，它永远不会中断，它应该工作以确保容器始终滚动，即使是一两个像素。