我遇到了一个问题,无法轻松解决,因为只出现在一种情况下:当我在我的页面上,我从横向切换到纵向时,在 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,我不希望他在我滑动这个菜单时出现(这部分运行良好)。
感谢您的帮助;)
最佳答案
是的,这很糟糕。这是一个错误,AFAICT。
到目前为止,我发现修复它的唯一机制是将容器上的 display
从 none
切换为 block
,就像这样:
var navElement = document.getElementsByTagName("nav")[0];
navElement.style.display = "无";
setTimeout ( function() { navElement.style.display = "block"; }, 0 );
在我看来,这*看起来*可怕,但它确实恢复了滚动能力。
因为据我所知,如果其中的元素强制容器滚动它永远不会中断,它应该工作以确保容器始终滚动,即使是一两个像素。
关于IOS Phonegap : landscape to portrait break overflow-x,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23459007/