溢出滾動不適用於位置固定元素iOS

Question

我的position: fixed在移動設備/尺寸頁面的最底部position: fixed導航欄。 導航欄本身有一個溢出容器，用戶可以在其中滾動到右側以查看其他鏈接（這是設計要求，我認為這是較差的用戶體驗，但這是2美分）。

在iOS設備上進行測試時，我一直看到的問題是，當頂部/底部本機瀏覽器元素未顯示在屏幕上時，滾動/任何鏈接單擊都不可用。 換句話說，當這些元素自動隱藏時，固定的行為根本不起作用。 我在下面創建了一個小提琴，並在其中包括了相關代碼的摘要，以防在iOS上正確查看小提琴時出現任何問題：

小提琴顯示有關行為

 .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

取自這里 。

處理溢出時：滾動； 屬性，-webkit-overflow-scrolling：touch; 屬性在移動網站上非常有用。 它基本上將尷尬的滾動行為更改為正常的預期行為。

當您使用-webkit-overflow-scrolling將內容動態添加到div時： 高度超過div時，它會破碎且無法滾動。 您可以通過不斷地設置一個內部div來解決此問題，該內部div會觸發滾動條，因為它比外部div高1px：

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

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

我還沒有測試。

Answer 2

好的，我能夠解決這個問題（有點奇怪）。 由於某種原因，將導航儀固定在最底部似乎是個問題。 為了解決這個問題，我使用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 3

在iOS上，瀏覽器（Safari，Chrome）錯誤地計算了DOM加載后動態添加的內容寬度。 例如，在表上使用pagination.js不允許在移動iOS設備上滾動。 解決方案是在更改內容后添加此CSS：

min-height:1000px

Answer 4

蘋果發布iOS10時，我遇到了與您相同的問題。 您的解決方案正是我所需要的！ 我的應用程序中的頁腳（由流星制成，在ios 10的iphone 7上運行）沒有顯示在底部。 但是我能夠用一個短得多的版本解決它。

在頁腳div我放置了一個position: fixed; and bottom: 0px;的類position: fixed; and bottom: 0px; position: fixed; and bottom: 0px; 做bottom: 0; 我的頁腳位於內容的底部而不是固定的。

我希望這對其他遇到相同問題的人有所幫助

Answer 5

這就是我為解決問題所做的

嘗試檢測滾動是否已停止。 滾動停止后，將位置設置為：固定在頁眉/頁腳上。

  var scrollStop = function (callback) {
    // Make sure a valid callback was provided
    if (!callback || Object.prototype.toString.call(callback) !== '[object Function]') return;
    // Setup scrolling variable
    var isScrolling;
    // Listen for scroll events
    window.addEventListener('scroll', function (event) {
        // Clear our timeout throughout the scroll
        $("header").css("position","absolute");
        window.clearTimeout(isScrolling);
        // Set a timeout to run after scrolling ends
        isScrolling = setTimeout(function () {
            // Run the callback
            callback();
        }, 66);
    }, false);
};
// Example
scrollStop(function () {
    $("header").css("position","fixed");
    console.log("Swami scrolling has stopped");
});