溢出滚动不工作位置固定元素iOS

Question

我有position: fixed导航栏位于移动设备/尺寸页面的最底部。导航栏本身有一个溢出容器，用户可以滚动到右侧看额外的链接（这是一个设计请求，在我看来，糟糕的用户体验，但这是我的2美分）。

我在iOS设备上测试时遇到的问题是，当顶部/底部原生浏览器元素不在屏幕上时，滚动/任何链接点击不可用。换句话说，当这些元素自动隐藏时，固定行为完全不起作用。我已经创建了一个小提琴，并列入了相关的代码片段，如果有iOS上观看小提琴正确的任何问题：

Fiddle showing the behavior in question

.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来完成这个任务，但我并不反对。谢谢你的帮助！

Answer 1

好吧，我能够解决这个问题（这是一种奇怪的）。出于某种原因，将导航固定到最底部似乎是问题所在。为了解决这个问题，我使用bottom属性添加了额外的空间，并添加了一个伪元素来填补空白。然后，增加了滚动容器内的链接元件的高度。下面是更新后的代码：

.sticky-nav { 
 
    position: fixed; 
 
    width: 100%; 
 
    padding-top: 10px; 
 
    bottom: 10px; 
 
    left: 0; 
 
    z-index: 90; 
 
    background-color: #ddd; 
 
    border-top: 1px solid #f8f8f8; 
 
} 
 

 
.sticky-nav:after { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 10px; 
 
    bottom: -10px; 
 
    left: 0; 
 
    background-color: #ddd; 
 
} 
 

 
.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; 
 
    height: 100%; 
 
    padding-right: 25px; 
 
    margin: 0; 
 
} 
 

 
.sticky-nav-menu li { 
 
    display: inline-block; 
 
    white-space: nowrap; 
 
    height: 100%; 
 
} 
 

 
.sticky-nav-menu li a { 
 
    display: inline-block; 
 
    height: 100%; 
 
    padding-top: 20px; 
 
    padding-right: 25px; 
 
} 
 

 
.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>

Answer 2

摘自here。

当使用overflow时：scroll;属性，-webkit-overflow-scrolling：touch;属性在移动网站上非常有用。它基本上将尴尬的滚动行为改变为正常的预期行为。

当您使用-webkit-overflow-scrolling动态添加内容到div时：touch;超过高度的div，它会变得破碎和不可滚动。

.outer { 
    overflow: scroll; 
    -webkit-overflow-scrolling: touch; 
    /* More properties for a fixed height ... */ 
} 

.inner { 
    height: calc(100% + 1px); 
} 

我没有测试它：您可以通过不断地具有内DIV，触发滚动条，因为它的1px的比外层div更高的解决这个问题。

Answer 3

我有同样的问题，你当苹果发布iOS10。您的解决方案就是我需要的！我的应用程序中的页脚（使用流星制作，使用ios 10在iphone 7上运行）不会粘在底部。不过，我能够以更短的版本解决它。

在我的页脚div我把一类position: fixed; and bottom: 0px; 在做bottom: 0;我的页脚是在内容的底部，而不是固定的。

我希望这可以帮助其他人同样的问题