溢出滚动不适用于位置固定元素iOS [英] Overflow scrolling not working on position fixed element iOS

查看：108
本文介绍了溢出滚动不适用于位置固定元素iOS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在移动设备/尺寸页面的最底部有位置：固定导航栏。导航栏本身有一个溢出容器，用户可以滚动到右侧看额外的链接（这是一个设计请求，在我看来，糟糕的用户体验，但这是我的2美分）。



我在iOS设备上测试时遇到的问题是，当顶部/底部原生浏览器元素不在屏幕上时，滚动/任何链接点击不可用。换句话说，当这些元素自动隐藏时，固定行为完全不起作用。我已经在下面创建了一个小提琴，并且还包含了相关代码的一个片段，以防在iOS上正确查看小提琴的任何问题：

小提琴演示有问题的行为 

  .sticky-nav {position：fixed;宽度：100％;底部：0;左：0; z-index：90; background-color：#ddd; border-top：1px solid＃f8f8f8; overflow：hidden;}。sticky-nav-inner {display：-webkit-flex;显示：flex; align-items：center; justify-content：space-between;宽度：90％; height：57px; max-width：1200px;保证金：0汽车; z-index：0;}。sticky-nav-menu {display：inline-block;白色空间：nowrap; padding-right：25px; margin：0;}。sticky-nav-menu li {display：inline-block;白色空间：nowrap; margin-right：25px; padding-top：20px;}。sticky-nav-overflow {width：calc（100％ -  100px）;身高：100％;保证金率：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 =tablistclass =sticky-nav-menu is-centered-text> < li role =presentationclass =active>< a href =＃linkonearia-controls =linkonerole =tabdata-toggle =tabclass =sticky- link> LINK ONE< / a>< / li> < li href =presentation>< a href =＃linktwoaria-controls =linktworole =tabdata-toggle =tabclass =sticky-nav-link> LINK TWO< / A>< /锂> < li href =presentation>>< a href =＃linkthreearia-controls =linkthreerole =tabdata-toggle =tabclass =sticky-nav-link> LINK THREE< / A>< /锂> < li role =presentationclass =sticky-nav-animated-list>< a href =＃linkfouraria-controls =linkfourrole =tabdata-toggle =tabclass =sticky-nav-link> LINK FOUR< / a>< / li> < / UL> < / DIV> < div class =sticky-nav-mobile> < a href =＃class =sticky-nav-cta call-button>立即购买< / a> < / DIV> < / DIV> < / NAV> < div class =tab-content> < div id =linkonerole =tabpanelclass =grid-container grid-parent linkone-pane is-centered-text tab-pane fade in active> < h1>连结一个窗格< / h1> < / DIV> < div id =linktworole =tab-panelclass =grid-container grid-parent linktwo-pane is-centered-text tab-pane fade> < h1>连结两个窗格< / h1> < / DIV> < div id =linkthreerole =tab-panelclass =grid-container grid-parent linkthree-pane is-centered-text tab-pane fade> < h1>连结三个窗格< / h1> < / DIV> < div id =linkfourrole =tab-panelclass =grid-container grid-parent linkfour-pane is-centered-text tab-pane fade> < h1>连结四个窗格< / h1> < / DIV> < / DIV> < / div>



例如 -webkit-overflow-scrolling ，但没有运气。我有一种感觉，这个问题是无关的。似乎甚至不会注册该屏幕的区域，而不会被iOS上的本机底栏所推动。



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

解决方案

好的，我能解决这个问题（这有点奇怪）。出于某种原因，将导航固定到最底部似乎是问题所在。为了解决这个问题，我使用底部属性添加了额外的空间，并添加了一个伪元素来填补空白。然后，增加了滚动容器内的链接元件的高度。以下是更新的代码：

.sticky-nav {position：fixed;宽度：100％; padding-top：10px;底部：10px;左：0; z-index：90; background-color：#ddd; border-top：1px solid＃f8f8f8;}。sticky-nav：after {content：;位置：绝对;宽度：100％; height：10px;底部：-10px;左：0; background-color：#ddd;}。sticky-nav-inner {display：-webkit-flex;显示：flex; align-items：center; justify-content：space-between;宽度：90％; height：57px; max-width：1200px;保证金：0汽车; z-index：0;}。sticky-nav-menu {display：inline-block;白色空间：nowrap;身高：100％; padding-right：25px; margin：0;}。sticky-nav-menu li {display：inline-block;白色空间：nowrap; height：100％;}。sticky-nav-menu li a {display：inline-block;身高：100％; padding-top：20px; padding-right：25px;} sticky-nav-overflow {width：calc（100％ - 100px）;身高：100％;保证金率：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 =tablistclass =sticky-nav-menu is-centered-text> < li role =presentationclass =active>< a href =＃linkonearia-controls =linkonerole =tabdata-toggle =tabclass =sticky- link> LINK ONE< / a>< / li> < li href =presentation>< a href =＃linktwoaria-controls =linktworole =tabdata-toggle =tabclass =sticky-nav-link> LINK TWO< / A>< /锂> < li href =presentation>>< a href =＃linkthreearia-controls =linkthreerole =tabdata-toggle =tabclass =sticky-nav-link> LINK THREE< / A>< /锂> < li role =presentationclass =sticky-nav-animated-list>< a href =＃linkfouraria-controls =linkfourrole =tabdata-toggle =tabclass =sticky-nav-link> LINK FOUR< / a>< / li> < / UL> < / DIV> < div class =sticky-nav-mobile> < a href =＃class =sticky-nav-cta call-button>立即购买< / a> < / DIV> < / DIV> < / NAV> < div class =tab-content> < div id =linkonerole =tabpanelclass =grid-container grid-parent linkone-pane is-centered-text tab-pane fade in active> < h1>连结一个窗格< / h1> < / DIV> < div id =linktworole =tab-panelclass =grid-container grid-parent linktwo-pane is-centered-text tab-pane fade> < h1>连结两个窗格< / h1> < / DIV> < div id =linkthreerole =tab-panelclass =grid-container grid-parent linkthree-pane is-centered-text tab-pane fade> < h1>连结三个窗格< / h1> < / DIV> < div id =linkfourrole =tab-panelclass =grid-container grid-parent linkfour-pane is-centered-text tab-pane fade> < h1>连结四个窗格< / h1> < / DIV> < / DIV> < / div>


I have position: fixed navigation 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).

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:

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-scrolling with 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.

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!

解决方案

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 bottom property 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: 

.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>

这篇关于溢出滚动不适用于位置固定元素iOS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆