IOS Phonegap : landscape to portrait break overflow-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 = "无";
setTimeout ( function() { navElement.style.display = "block"; }, 0 );


在我看来，这*看起来*可怕，但它确实恢复了滚动能力。

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