logo标签列表

iOS上固定位置元素的溢出滚动不起作用

javascriptjqueryhtmlcsstwitter-bootstrap
3

我在移动设备上设置了一个固定位置的导航条，位于页面的底部。导航条本身有一个溢出容器，在其中用户可以向右滚动以查看其他链接（这是设计要求，但在我的观点中不利于用户体验）。

在 iOS 设备上测试时出现的问题是，当顶部/底部的本地浏览器元素不在屏幕上时，无法进行滚动/任何链接点击。换句话说，当这些元素自动隐藏时，固定行为根本不起作用。我在下面创建了一个 fiddle，并且在其下方包括了一个相关代码片段，以防在 iOS 上查看 fiddle 时出现任何问题：

演示所述行为的 Fiddle

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

5个回答
13

本内容翻译自这里。

使用overflow: scroll属性时，在移动端网站上，-webkit-overflow-scrolling: touch属性非常有用。它可以将奇怪的滚动行为改变为正常、预期的行为。

当你动态添加超出外部div高度的内容到带有-webkit-overflow-scrolling: touch;的div中时，它会变得不可滚动且破损。你可以通过始终具有一个内部div来修复此问题，该内部div因其高度比外部div高1像素而触发滚动条：

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

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

我还没有测试过它。

3
谢谢您的建议！我尝试了一下，但是它没有解决问题（我的容器内容静态，但是左右溢出）。非常感谢您花时间研究解决方案，并支持我的尝试。 - ghost_dad
2
在iOS上，浏览器（Safari、Chrome）在DOM加载后动态添加内容时会错误计算内容宽度。例如，在表格上使用pagination.js在移动iOS设备上无法滚动。解决方法是在更改内容后添加以下CSS：
min-height:1000px
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>

0

当苹果发布iOS10时，我遇到了与您相同的问题。您的解决方案正是我所需要的！我的应用程序底部（使用meteor制作，在iphone 7上运行ios 10）无法固定在底部。但是，我能够用更短的版本解决它。

在我的页脚div中，我使用了一个带有position: fixed; and bottom: 0px;的类。当使用bottom: 0;时，我的页脚位于内容底部而不是固定的。

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

0

这是我解决问题的方法

尝试检测滚动是否停止。一旦滚动停止，然后在页眉/页脚上设置position:fixed。

  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");
});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接