Question

我遇到了一个问题并且无法轻易解决，因为只出现在一个案例中：当我在我的页面上时，我在iOS上从横向切换到肖像。我的应用程序是一个使用Angular和插件设备定位的Phonegap应用程序，以使其与我的响应式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 );

在我看来，哪个*看起来很可怕，但它确实恢复了滚动功能。

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

IOS Phonegap：风景画像破解溢出-x

1 个答案: