修复了导航/标题和键盘滚动

Question

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

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

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

为了说明这个问题，我创建了一个小提琴： https ： //jsfiddle.net/x7hj8c4m/尝试使用Firefox上的Space滚动内容。 固定元素将覆盖滚动前尚未显示的文本。 如果你添加left: 0 ，它的工作原理。

Answer 1

非常有趣的观察。

首先，按压空间相当于按下PgDn 。 当按下PgDn时，页面应垂直滚动大约“一页的px值”。 如OP的小提琴所示，Firefox特别以不同方式计算此值，具体取决于它是否检测到固定标头。

根据我自己对IE，Chrome，Firefox的测试，我推断：

• 没有position: fixed元素，Chrome和IE向下滚动文档高度的约87.5％ ; Firefox向下滚动文档高度 - 滚动条高度 - 约20px 。

• 有position: fixed; width: 100% position: fixed; width: 100%屏幕左上角的position: fixed; width: 100%元素，Firefox智能地理解元素在感知上降低了文档高度，因此适用： 文档高度 - 滚动条高度 - 固定元素高度 - ~20px 。 条件似乎非常具体：元素必须完全固定在文档框模型的左上角，并且全宽，以使其工作。 其他浏览器（Chrome，IE）不执行此类补偿，并执行标准的87.5%滚动。

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

Answer 2

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