I have position: fixed移动设备/尺寸页面最底部的导航栏。导航栏本身有一个溢出容器，用户可以滚动到右侧以查看其他链接（这是一个设计请求，在我看来，用户体验很差，但那是我的 2 美分）。
我在 iOS 设备上测试时遇到的问题是，当顶部/底部本机浏览器元素不在屏幕上时，滚动/任何链接单击均不可用。换句话说，当这些元素自动隐藏时，固定行为根本不起作用。我在下面创建了一个小提琴，并在其中包含了相关代码片段，以防在 iOS 上正确查看小提琴时出现任何问题：
小提琴显示有问题的行为 https://jsfiddle.net/hmg8sv1o/2/
.sticky-nav {
position: fixed;
width: 100%;
bottom: 0;
left: 0;
z-index: 90;
background-color: #ddd;
border-top: 1px solid #f8f8f8;
overflow: hidden;
}
.sticky-nav-inner {
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: space-between;
width: 90%;
height: 57px;
max-width: 1200px;
margin: 0 auto;
z-index: 0;
}
.sticky-nav-menu {
display: inline-block;
white-space: nowrap;
padding-right: 25px;
margin: 0;
}
.sticky-nav-menu li {
display: inline-block;
white-space: nowrap;
margin-right: 25px;
padding-top: 20px;
}
.sticky-nav-overflow {
width: calc(100% - 100px);
height: 100%;
margin-right: 2%;
overflow-x: scroll;
}
.sticky-nav-mobile {
padding-left: 1%;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="pane-container">
<nav class="sticky-nav js-sticky-nav clearfix">
<div class="sticky-nav-inner">
<div class="sticky-nav-overflow">
<ul role="tablist" class="sticky-nav-menu is-centered-text">
<li role="presentation" class="active"><a href="#linkone" aria-controls="linkone" role="tab" data-toggle="tab" class="sticky-nav-link">LINK ONE</a></li>
<li role="presentation"><a href="#linktwo" aria-controls="linktwo" role="tab" data-toggle="tab" class="sticky-nav-link">LINK TWO</a></li>
<li role="presentation"><a href="#linkthree" aria-controls="linkthree" role="tab" data-toggle="tab" class="sticky-nav-link">LINK THREE</a></li>
<li role="presentation" class="sticky-nav-animated-list"><a href="#linkfour" aria-controls="linkfour" role="tab" data-toggle="tab" class="sticky-nav-link">LINK FOUR</a></li>
</ul>
</div>
<div class="sticky-nav-mobile">
<a href="#" class="sticky-nav-cta call-button">BUY NOW</a>
</div>
</div>
</nav>
<div class="tab-content">
<div id="linkone" role="tabpanel" class="grid-container grid-parent linkone-pane is-centered-text tab-pane fade in active">
<h1>Link one pane</h1>
</div>
<div id="linktwo" role="tab-panel" class="grid-container grid-parent linktwo-pane is-centered-text tab-pane fade">
<h1>Link two pane</h1>
</div>
<div id="linkthree" role="tab-panel" class="grid-container grid-parent linkthree-pane is-centered-text tab-pane fade">
<h1>Link three pane</h1>
</div>
<div id="linkfour" role="tab-panel" class="grid-container grid-parent linkfour-pane is-centered-text tab-pane fade">
<h1>Link four pane</h1>
</div>
</div>
</div>
我尝试过一些替代方法，例如-webkit-overflow-scrolling没有运气。我感觉这个问题是无关的。似乎甚至没有注册屏幕的该区域，除非被 iOS 上的本机底部栏向上推。
非常感谢任何和所有的帮助。我自己已经没有办法尝试了。我希望用最少的 JavaScript 来完成这个任务，但我一点也不反对。感谢您的帮助！
取自here http://patrickmuff.ch/blog/2014/10/01/how-we-fixed-the-webkit-overflow-scrolling-touch-bug-on-ios/.
处理溢出时：滚动；属性，-webkit-overflow-scrolling: touch;属性在移动网站上非常有用。它基本上将尴尬的滚动行为改变为正常的预期行为。
当您使用 -webkit-overflow-scrolling: touch; 动态添加内容到 div 时如果超过了 div 的高度，它就会被破坏并且无法滚动。您可以通过不断使用内部 div 来解决此问题，该内部 div 会触发滚动条，因为它比外部 div 高 1px：
.outer {
overflow: scroll;
-webkit-overflow-scrolling: touch;
/* More properties for a fixed height ... */
}
.inner {
height: calc(100% + 1px);
}
我没有测试过。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
