我可以更改 pagedown/pageup 滚动页面的量，以避免某些内容丢失在固定标题后面吗？答案

【问题标题】：Can I change the amount that pagedown/pageup scrolls the page, to avoid some content being lost behind a fixed header?我可以更改 pagedown/pageup 滚动页面的量，以避免某些内容丢失在固定标题后面吗？
【发布时间】：2021-09-20 15:55:43
【问题描述】：

我最近了解了:target::before{content:'';display:block;height:--fixedHeaderHeight}，它可以让片段滚动到适当的位置，而不会被高大的固定标题隐藏。 IE。如果标头高 200 像素，则在 URL 中指定 ID 的元素将显示在其下方，而不是隐藏在其后面。

不过，我的 pgup/pgdn 管理系统中也有类似的问题。我经常在屏幕上上下翻页，有些项目最终被隐藏在固定标题后面。 IE。位于第一个“页面”底部并最终位于第二个“页面”顶部的内容隐藏在标题后面，并且永远不会被看到。

是否有类似的 CSS（或 JS）技巧来更改每次按下 pgup/pgdn 时滚动的内容量，还是我不走运？

【问题讨论】：

将事件处理程序附加到 keydown 并检查 PgUp 和 PgDown 键。防止默认并随意滚动。
这能回答你的问题吗？ Jump to specific points in a HTML page using Page up and down
那种。它确实提供了一种方法，但我已经知道我可以做到。我想知道是否有“官方”标准方法来实现这一目标。但鉴于缺乏回应，我认为不会。

标签： javascript css

【解决方案1】：

这就是我所使用的：

document.addEventListener('keydown', function(e) {
    if(e.key === 'PageUp' || e.key === 'PageDown') {
        e.preventDefault();

        const doc = document.documentElement;

        const left = doc.scrollLeft;
        const top  = doc.scrollTop;

        // standard offset in Chrome is 30px, and the site header is 104px
        const delta = window.innerHeight - 134;


        (e.key === 'PageUp') ? window.scrollTo(left, top - delta)
                             : window.scrollTo(left, top + delta);
    }
});

【讨论】：