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

2024-01-08

I have position: fixed移动设备/尺寸页面最底部的导航栏。导航栏本身有一个溢出容器,用户可以滚动到右侧以查看其他链接(这是一个设计请求,在我看来,用户体验很差,但那是我的 2 美分)。

我在 iOS 设备上测试时遇到的问题是,当顶部/底部本机浏览器元素不在屏幕上时,滚动/任何链接单击均不可用。换句话说,当这些元素自动隐藏时,固定行为根本不起作用。我在下面创建了一个小提琴,并在其中包含了相关代码片段,以防在 iOS 上正确查看小提琴时出现任何问题:

小提琴显示有问题的行为 https://jsfiddle.net/hmg8sv1o/2/

.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 来完成这个任务,但我一点也不反对。感谢您的帮助!


取自here http://patrickmuff.ch/blog/2014/10/01/how-we-fixed-the-webkit-overflow-scrolling-touch-bug-on-ios/.

处理溢出时:滚动;属性,-webkit-overflow-scrolling: touch;属性在移动网站上非常有用。它基本上将尴尬的滚动行为改变为正常的预期行为。

当您使用 -webkit-overflow-scrolling: touch; 动态添加内容到 div 时如果超过了 div 的高度,它就会被破坏并且无法滚动。您可以通过不断使用内部 div 来解决此问题,该内部 div 会触发滚动条,因为它比外部 div 高 1px:

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

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

我没有测试过。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

溢出滚动不适用于位置固定元素 iOS 的相关文章

随机推荐

  • PowerShell 是强类型语言吗?

    PowerShell 肯定属于动态语言的范畴 但它会被视为强类型吗 这些术语存在一定程度的混乱 本文 http eli thegreenplace net 2006 11 25 a taxonomy of typing systems 解释
  • 在Android应用程序上获取id令牌并在后端服务器上验证它(如何使用id令牌?)

    我正在开发一个 Android 应用程序 它使用来自我自己的 REST API 服务器的数据 我想使用 Firebase 身份验证 因为它允许用户以非常简单的方式使用 Google Facebook Twitter 登录 但我不知道如何使用
  • Intl.Collat​​or 和带有数字选项的自然排序对十进制数字的排序不正确

    使用对十进制数进行排序Intl Collator以及启用的选项numeric比较小数不正确 在某些浏览器上 比较 0 005 和 0 05 会返回 0 因为数字相同 不同浏览器中的结果 铬 54 0 火狐 49 0 边缘 1 IE 11 1
  • 如何跳过 PHPUnit 中的前 N ​​个测试?

    场景 使用 PHPUnit 运行大量测试 一些测试 例如 1544 中的 537 个 在几分钟后失败 更改很小 不太可能影响之前的测试 我希望能够跳过前 536 个测试 执行类似这样的操作以 从我上次停下来的地方继续 phpunit ski
  • 在 ASP.NET 中自动进行 HtmlEncode

    被 Ruby on Rails 3 宠坏了 我希望所有 HTML 输出都能自动编码 我问这个关于脚本漏洞的问题 https stackoverflow com questions 7136864 script exploits in asp
  • 将本机页脚视图添加到 webview

    我有一个WebView和我想在下面添加的本机自定义视图WebView 我试过包裹WebView里面一个ScrollView 虽然这正是我想要的 但滚动性能确实很滞后 如果用户点击屏幕滚动滚动条并不会像应有的那样停止滚动 我想到的另一种方法是
  • ASP.NET MVC + 模型状态和部分视图

    我有一个名为 LogOn 的部分视图 其中我基本上将登录输入复制到控件中 我使用 Html RenderPartial 将控件放置在 Ajax BeginForm 内的 Index Html 中 div div 我正在尝试传回验证消息并显示
  • 单击按钮后按键监听器不工作

    我在java中的框架上附加了一个按键侦听器 当我按下任何键时 我可以检测到按键 但是奇怪的事情正在发生 我的游戏是扫雷游戏 我有一个重新启动按钮 基本上可以清除棋盘并重新挖掘它 奇怪的是 当我用鼠标单击按钮时 一切都正常 并且面板被提醒 但
  • pandas 数据框的高效扁平化

    我有一个熊猫数据框 它看起来像这样 pd DataFrame data np arange 1 10 reshape 3 3 index A B C columns A B C 但有 100 行和 100 列 我想把它压平 使它看起来像这样
  • 将文本从电脑复制并粘贴到 Android Studio 模拟器时出错

    大约 2 个月前 我能够从电脑剪贴板复制文本并将其粘贴到在 Android Studio 模拟器上运行的应用程序中 只需在电脑上执行 ctrl c 并将其粘贴到 TextView 中即可 现在我使用的是新版本的Android Studio
  • 钥匙锁实际上锁定了什么资源?

    我知道钥匙锁将钥匙锁定在索引中 然而 钥匙 到底意味着什么呢 例如 如果我在姓氏列上有一个非聚集索引并尝试更新姓氏 Jones 的位置 那么我是否会有效锁定表中姓氏为 Jones 的每一行 或者索引会被锁定在更高的级别 从而阻止访问姓氏不是
  • 在 ListView 中触摸项目时更改行背景颜色

    我尝试使用 BaseAdapter 在 ListView 中显示项目 我在 BaseAdapter 中尝试以下代码 Override public View getView final int position View convertVi
  • CSS:为什么“vertical-align:middle”不起作用?

    考虑以下示例 现场演示在这里 http jsfiddle net cXUnT HTML a img src http img brothersoft com icon softimage s smiley s challenge 13193
  • 根据浏览器宽度显示图像

    我有一堆图像想要使用 jquery 显示 我有 div 我使用 jquery 根据某些 node id 标准填充 div 例如 如果 node id 是 teamA 我会显示图像名称中包含 teamA 文本的图像 它可以工作 问题是当将图像
  • 地平线检测算法[关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 您能帮我找到有关如何检测图像上的地平线的信息吗 它不应该基于遗传算法或神经网络 只是发现这个问题很有趣 所以我在互联网上为您搜索并提出
  • 调整 G1GC 参数以进行积极的垃圾收集?

    我的 JVM 基本上是一个 Spark 执行器 它一个接一个地运行任务 任务需要大量内存 并且在其生命周期内需要大量内存 JConsole 和 JVisualVM 并排报告 https i stack imgur com seZNO png
  • Meteor:什么时候 this.isSimulation 比 Meteor.isClient 更有用?

    this isSimulation的定义 Access inside a method invocation Boolean value true if this invocation is a stub Meteor isClient 的
  • Django:为什么 Foo.objects.extra(...) 比 Foo.objects.raw 快得多?

    所以我试图优化一个相当奇怪的查询 但这是一个遗留数据库 所以我用我所拥有的来凑合 这些是我正在尝试的查询 此时它们提供相同的输出 w 是我的查询集 def future schedule request past datetime date
  • setPluginState(WebSettings.PluginState) 已弃用。我应该怎么办? (网页视图插件)

    我正在使用以下代码将我的 Flash 游戏制作成 Android 应用程序 它工作得很好 但编译器给出了错误 类型中的方法 setPluginState WebSettings PluginState WebSettings 已弃用 这是代
  • 溢出滚动不适用于位置固定元素 iOS

    I have position fixed移动设备 尺寸页面最底部的导航栏 导航栏本身有一个溢出容器 用户可以滚动到右侧以查看其他链接 这是一个设计请求 在我看来 用户体验很差 但那是我的 2 美分 我在 iOS 设备上测试时遇到的问题是