固定导航/标题和键盘滚动答案

【问题标题】：Fixed navigation/header and keyboard scrolling固定导航/标题和键盘滚动
【发布时间】：2015-06-01 14:24:21
【问题描述】：

如果页面顶部有固定位置的元素，使用键盘（PgUp/PgDown、Space）滚动页面有时会变得很困难，例如导航栏：在视口底部不可见的内容可能会在滚动后被固定元素隐藏。

如何解决这个问题？浏览器会计算，它们应该滚动多远？我观察到不同浏览器以及不同页面上相同浏览器的不同行为（例如，Firefox 在http://www.sueddeutsche.de/ 上留下大约 80 像素的旧内容，但在http://www.taz.de 上留下的内容要少得多。Chromium 留下的内容要多得多。）。

这是一个问题吗，即我旁边的任何人都使用键盘滚动网页吗？你知道任何统计数据吗？

为了说明问题，我创建了一个 Fiddle： https://jsfiddle.net/x7hj8c4m/ 尝试在 Firefox 上使用 Space 滚动内容。固定元素将覆盖滚动前尚不可见的文本。如果你添加left: 0，它可以工作。

【问题讨论】：

我不确定你在问什么。
使用键盘滚动相当于使用鼠标，步骤可能很小但没有区别。
我添加了一个小提琴来说明问题。
解决问题的 JS-Lib：murtaugh.github.io/sticky-pagination-fixer
所以这仍然是一个悬而未决的问题，还是什么？根据我对您的帖子的理解，您想让屏幕在每次点击空格键时滚动n 像素数，并且在所有浏览器中始终如一，对吗？如果是这种情况，您可能可以将事件与scrollTop() 或其他函数绑定以移动垂直滚动。

标签： javascript html css browser

【解决方案1】：

非常有趣的观察。

首先，按空格相当于按PgDn。当按下 PgDn 时，页面应该垂直滚动大约“一页的 px”。如 OP 的 fiddle 所示，Firefox 特别计算这个值的方式不同，这取决于它是否检测到一个固定的标头。

根据我自己在 IE、Chrome、Firefox 上的测试，我推断：

如果没有position: fixed 元素，Chrome 和 IE 会向下滚动 ~87.5% 文档高度； Firefox 向下滚动 文档高度 - 滚动条高度 - ~20px。
通过屏幕左上角的position: fixed; width: 100%元素，Firefox 智能地理解该元素在感知上降低了文档高度，因此适用：文档高度 - 滚动条高度 - 固定元素高度 - ~20 像素。条件似乎非常具体：元素必须完全固定在文档框模型的左上角，全宽才能正常工作。其他浏览器（Chrome、IE）不执行这种补偿，而是执行标准的87.5%滚动。

我不知道这是否相关，但它可能与对position: sticky 的支持有关。

【讨论】：

【解决方案2】：

通过键盘滚动是一种非常基本的行为，它可能不会与 DOM 进行太多交互（如果有的话），因此期望它考虑固定元素可能是太多了。似乎有特定于浏览器的预定义增量（我不知道是否或如何自定义它们），但请注意，当您使用向上/向下箭头键时，增量通常更小（可能足够小）。

【讨论】：