溢出滚动不适用于位置固定元素 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 的相关文章

  • 使用 jQuery UI 日期选择器选择日历更改 URL

    我正在使用 jQuery UI 选择器 我想知道当有人选择日期时是否有可能 它会自动将他们重定向到 URL 如下所示 index php date 2013 10 15 这是我正在使用的插件 Date
  • 覆盖函数(例如“警报”)并调用原始函数?

    我想用调用原始版本的新版本覆盖 Javascript 内置函数 类似于用调用的版本覆盖类上的方法 super有多种语言版本 我怎样才能做到这一点 例如 window alert function str do something addit
  • nodejs mocha suite 未定义错误

    我正在尝试使用摩卡运行一些测试 但似乎无法克服这个错误 E tdd nodejs cart gt mocha cart test js node js 201 throw e process nextTick error or err Re
  • 这种 JavaScript 编码风格有什么问题? (闭包与原型)

    我们一直在讨论如何最好地处理我们的 JS 应用程序中的对象 研究 Stoyan Stefanov 的书 阅读无数关于 新 这个 原型 闭包等的 SO 帖子 事实上有很多 而且它们有这么多相互竞争的理论 表明没有完全明显的答案 让我们假设我们
  • Angular 2 runOutsideAngular 仍然改变 UI

    从我的理解来看runOutsideAngular https angular io docs ts latest api core index NgZone class html runOutsideAngular anchor 如果我需要
  • 在overlayImage中应用滤镜的方法在哪里?

    我想在overlayImage中应用一个过滤器 唯一的方法是在渲染后在整个画布上应用过滤器 对此没有内置支持 但很容易 破解 var overlayImageUrl load overlay image first fabric Image
  • 显示表中的记录

    我的第一个 PHP 项目遇到了一些麻烦 我试图从 MySQL 数据库 有 3 条记录 获取数据并将其显示在表格中 问题是它似乎只显示记录 2 和 3 它跳过了第 1 条记录 请参阅我的代码并在下面显示 if mysqli connect e
  • HTML5 有效的命名空间标签前缀

    验证我的页面时 W3 Validator 会给我一个错误
  • 如何检查 Map 或 Set 是否为空?

    对于 JavaScript 中的传统对象 使用以下命令很容易检查它是否为空 Object keys method const emptyObj console log Object keys emptyObj length 0 true i
  • 如何使用JQuery和Django(ajax + HttpResponse)?

    假设我有一个 AJAX 函数 function callpage ajax method get url abc data x 3 beforeSend function success function html IF HTTPRESPO
  • 删除

    好的 我有一个小菜单栏 菜单内的三个元素还有更多的子菜单 但是菜单栏中的元素之间有不必要的间距 而且我创建的子菜单有不必要的背景宽度 我在代码中将其涂成白色以使读者理解 由于这种不必要的宽度 即使鼠标悬停在不可见的宽度上 在本例中为白色 本
  • Three.js WebGL 从着色器绘制圆形自定义填充和边框颜色

    我将 Three js 与 WebGLRenderer 一起使用 我试图找出或查看如何使用 CircleGeometry 绘制圆圈的示例 并能够从顶点或片段着色器控制其填充和边框颜色 如果不使用图像作为纹理 这是否可能 抱歉 如果这真的很简
  • 在角度控制器中监听文档事件

    如何捕获角度控制器中的事件 我有文档级事件 所以我需要在角度控制器中捕获事件 这可能吗 Update 我有独立的 js 文件来处理来自相机的一些操作 document addEventListener myCameraEvent handl
  • 如何按字母顺序排序并先小写排序

    如何获得以下排序的结果Food to Eat然后是 食物123 显然 第二个较低的 o 应该将 要吃的食物 带到排序后的第一个项目中 我很惊讶这个问题不容易通过谷歌找到答案 这个壮举没有包含在 javascript 标准中也让我感到惊讶 F
  • Jquery 两个字段的时间差(以小时为单位)

    我的表单中有两个字段 用户可以在其中选择输入时间 start time end time 我想在更改这些字段时重新计算另一个字段的值 我想做的是获取两次之间的小时数 例如 如果我的开始时间为 5 30 结束时间为 7 50 我想将结果 2
  • 将 div 文本分配给变量然后显示它

    我有一个简单的任务 我试图完成学习 JavaScript 但一直无法找到明确的答案 这是代码 div Testing div 基本上我希望将方框 div 中的文本存储到变量中 然后 我想在页面的不同部分显示该变量的文本 使用上面的代码我得到
  • 使用 javascript Array reduce() 方法有什么真正的好处吗?

    reduce 方法的大多数用例都可以使用 for 循环轻松重写 对 JSPerf 的测试表明 reduce 通常会慢 60 75 具体取决于每次迭代内执行的操作 除了能够以 函数式风格 编写代码之外 还有什么真正的理由使用reduce 吗
  • 如何使用引用该键的变量来获取对象键中的值?

    我有一个对象 我可以引用密钥a如下 var obj a A b B c C console log obj a return string A 我想通过使用变量引用对象键来获取值 如下所示 var name a console log ob
  • 如何解决此错误:属性 rel 的原始源值错误

    我正在尝试使用 w3c 验证我的网站 但出现错误 Bad value original source for attribute rel on element link The string original source is not a
  • 利用重力效果拖动元素

    我想完成类似于 photoshop com 和此网站的功能 http mrdoob com projects chromeexperiments google gravity http mrdoob com projects chromee

随机推荐

  • 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 设备上测试时遇到的问题是