溢出滾動不工作位置固定元素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;我的頁腳是在內容的底部，而不是固定的。

我希望這可以幫助其他人同樣的問題