当我在 iOS Safari 9+ 中快速滚动到底部时，固定元素不可点击答案

【问题标题】：Fixed elements aren't clickable when I quickly scroll to the bottom in iOS Safari 9+当我在 iOS Safari 9+ 中快速滚动到底部时，固定元素不可点击
【发布时间】：2016-05-21 21:27:23
【问题描述】：

我只在 iOS Safari 9+（8.4 很好）上遇到了一个非常烦人的问题，一旦用户快速滚动页面，由于外观和实际点击，固定元素内的锚链接不再可点击/hit 区域在用户再次滚动之前不会与其元素对齐。

它不会每次都以相同的方式发生，并且可能需要几次尝试才能“破坏”系统。内容必须比视口长才能正常工作。

目前还没有解决此问题的方法。我该如何解决这个问题？

更新：经过进一步测试，该问题仅出现在 iOS Safari 9 及以上版本，在 iOS 8 上测试，没有问题。

更新 2： 现在很明显，大多数使用position:fixed; 甚至position:-webkit-sticky; 的网站都会发生这种情况。你可能想检查你的:)

HTML

<section>
  <article></article>
  <article></article>
  <article></article>
</section>

<div class="sticky">
  <a href=""></a>
</div>

CSS：

html, body {
  margin:0;
}

article {
  display: block;
  height: 200px;
  width: 100%;
  margin-bottom: 20px;
  background: whitesmoke;
}

.sticky {
  width:100%;
  height:100px;
  position: fixed;
  bottom:0;
  background: orange;
  text-align:center;

}

.sticky a {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: yellow;
}

http://codepen.io/toobulo/pen/dGEodo

该问题不会在 Codepen 编辑器中发生，因为它与移动 Safari 的弹性/工具栏大小更改有关。请将代码导出到自己的页面，或使用以下链接：

https://cdn.rawgit.com/anonymous/3234ad797dd80e5f8905/raw/ab51c4d8621cfb827f83a33d21940579f8682cde/index.html

【问题讨论】：

标签： html ios css responsive-design webkit

【解决方案1】：

这个问题与ios中的弹跳效果和丢失工具栏和标题栏有关。我发现解决此问题的唯一方法是执行以下操作：

html,
body {
  height: 100%;
  width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: auto
}

您也可以在断点上执行此操作，因此它仅适用于移动设备。希望这会有所帮助。

** 增加了溢出滚动。

【讨论】：

虽然这个变通办法解决了这个问题，但它为各种领域（如 javascript 计算）打开了一个新的蠕虫罐 - 例如：var scroll = $(window).scrollTop(); if (scroll >= 10) { // do something }
@Joe 您应该将其作为问题要求的一部分包含在内
@ZachSaucier 我不想用来自各种建议修复的全新要求来过度拥挤这个问题，希望以最简单的形式解决问题（没有与 JS 相关的问题），因此我的评论适合这个回复，不是吗？
@Joe 如果溢出（反弹）是罪魁祸首并且仅限于 iOS，那么-webkit-overflow-scrolling CSS 属性可能会有所帮助，example here。
@RogierSpieker 你能详细说明一下吗？您是否只是在使用 Andy 的方法建议动量滚动一次？

【解决方案2】：

您可以将 .sticky 设为绝对链接并应用以下 CSS，以便该链接独立于窗口/浏览器。

.sticky {
  width: 50px;
}
.sticky a {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

【讨论】：

这无济于事，因为我需要相对于视口的固定定位 - 而不是文档高度。使用您的解决方案，div 将滚动一个长页面。
好的，那么您也可以尝试使用 resize 函数（jQuery 的）在每次滚动时计算 (var1) = (viewport hight) 和 (var2) = (viewport 在页面中的底部位置) 并计算：(mid_point) = (var2 - (var1)/2)。我希望你明白了。然后，您可以将块的位置动态设置为 mid_point。
谢谢，虽然使用 Position:Fixed 解决会很好；并且没有额外的 JS，我感谢您的帮助，并将尝试此作为最后的手段。 :)

【解决方案3】：

我发现andy jones's answer 有效地为我解决了这个问题，但它有一个不受欢迎的副作用：动量滚动不再起作用。这使得在 iPad 上向下滚动长页面需要很长时间。

将 andy 的回答与 this tidbit from CSS tricks 相结合，使我的链接可点击，同时还允许动量滚动：

html,
body {
  height: 100%;
  overflow-y: scroll; /* must be scroll, not auto */
  -webkit-overflow-scrolling: touch;
}

我还发现 andy 的答案中的 width: 100% 样式是不必要的，所以我也删除了它。

【讨论】：