溢出滚动不适用于位置固定元素 iOS

Question

我在移动设备/尺寸页面的最底部有 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 来完成这个，但我一点也不反对。谢谢你的帮助！

原文由 ghost_dad 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 ghost_dad 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

取自 这里。

使用溢出时：滚动；属性，-webkit-overflow-scrolling: touch;属性在移动网站上非常有用。它基本上将笨拙的滚动行为更改为正常的预期行为。

当您使用 -webkit-overflow-scrolling: touch 将内容动态添加到 div 时；超过 div 的高度，它就会损坏并且无法滚动。你可以通过不断地拥有一个内部 div 来解决这个问题，它会触发滚动条，因为它比外部 div 高 1px：

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

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

我没有测试过。

原文由 Ravimallya 发布，翻译遵循 CC BY-SA 3.0 许可协议