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

Question

提问by ghost_dad

I have position: fixednavigation bar at the very bottom of a page on mobile devices / sizes. The nav bar itself has an overflow container where the user can scroll to the right to see additional links (this is a design request and in my opinion a poor user experience, but that's my 2 cents).

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

The issue I've been seeing when testing on iOS devices is that the scrolling / any link clicking is not available when the top / bottom native browser elements are not on screen. In other words, when those elements auto-hide, the fixed behavior does not work at all. I've created a fiddle below and also included a snippet of the pertinent code under that, in case there's any issues viewing the fiddle on iOS properly:

我在 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>

I've tried some alternative methods, such as -webkit-overflow-scrollingwith no luck. I have a feeling this issue is unrelated. Seems to not even register that area of the screen without being pushed up by the native bottom bar on iOS.

我尝试了一些替代方法，例如-webkit-overflow-scrolling没有运气。我有一种感觉，这个问题是无关紧要的。似乎甚至没有注册屏幕的那个区域而没有被 iOS 上的原生底部栏向上推。

Any and all assistance is much appreciated. Just running out of ideas to try on my own. I'm hoping to accomplish this with a minimum of JavaScript, but I'm not at all opposed. Thanks for your help!

非常感谢任何和所有的帮助。只是没有想法可以自己尝试。我希望用最少的 JavaScript 来完成这个，但我一点也不反对。谢谢你的帮助！

Answer 1

采纳答案by ghost_dad

Alright, I was able to resolve the issue (which is kind of a weird one). For some reason, having the nav fixed to the very bottom seemed to be the issue. To fix this, I added additional space using the bottomproperty and added a pseudo-element to fill in the gap. Then, increased the height of the link elements inside the scroll container. Here's the updated code:

好吧，我能够解决这个问题（这有点奇怪）。出于某种原因，将导航固定在最底部似乎是问题所在。为了解决这个问题，我使用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

回答by Ravimallya

Taken from here.

取自这里。

When working with the overflow: scroll; attribute, the -webkit-overflow-scrolling: touch; attribute can be very useful on mobile sites. It basically changes the awkward scrolling behavior into the normal, expected behavior.
When you dynamically add content to a div with -webkit-overflow-scrolling: touch; that exceeds the div in height, it becomes broken and unscrollable. You can fix this by constantly having an inner div, that triggers the scrollbar because its 1px higher than the outer div:

处理溢出时：滚动；属性，-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);
}

I've not tested it.

我没有测试过。

Answer 3

回答by David D.

On iOS, browsers (Safari, Chrome) are miscalculating content width that has been added dynamically after DOM load. For example, using pagination.json a table didn't allow scrolling on mobile iOS devices. Solution is to add this css after changing content:

在 iOS 上，浏览器（Safari、Chrome）错误计算了在 DOM 加载后动态添加的内容宽度。例如，在表格上使用pagination.js不允许在移动 iOS 设备上滚动。解决方案是在更改内容后添加此css：

min-height:1000px

Answer 4

回答by Delphine Claerhout

I've had the same issues as you when apple released iOS10. Your solution was what I needed! The footer in my app (made with meteor, running on iphone 7 with ios 10) was not sticking to the bottom. However I was able to solve it in a much shorter version.

苹果发布iOS10时我也遇到了和你一样的问题。您的解决方案正是我所需要的！我的应用程序中的页脚（用meteor 制作，在带有ios 10 的iphone 7 上运行）没有粘在底部。但是，我能够在更短的版本中解决它。

On my footer divI put a class with position: fixed; and bottom: 0px;When doing bottom: 0;my footer is at the bottom of the content and not fixed.

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

I hope this helps other people with the same issue

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

Answer 5

回答by Ravindran Raghu

This is what i did to solve the issue

这就是我为解决问题所做的

Try to detect if the scrolling has stopped. Once the scrolling is stopped, then set the position:fixed on the header/footer.

尝试检测滚动是否已停止。一旦滚动停止，然后设置位置：固定在页眉/页脚上。

  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");
});

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

提问by ghost_dad

采纳答案by ghost_dad

回答by Ravimallya

回答by David D.

回答by Delphine Claerhout

回答by Ravindran Raghu

相关推荐

最近更新

标签

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

提问by ghost_dad

采纳答案by ghost_dad

回答by Ravimallya

回答by David D.

回答by Delphine Claerhout

回答by Ravindran Raghu

相关推荐

twitter-bootstrap 如何在 Bootstrap 3 中为响应式表格添加边框

twitter-bootstrap 使用 ES6 导入加载 Bootstrap 的最佳方法是什么？

twitter-bootstrap 未捕获的类型错误：$(...).modal 不是函数 jquery

twitter-bootstrap 使 Bootstrap 输入组全宽

相关推荐

最近更新

标签