如何调整PageUp/PageDown滚动距离，避免内容被固定头部遮挡？

你之前使用的:target::before方案仅针对URL锚点跳转场景生效，无法覆盖PageUp/PageDown这类浏览器原生滚动行为，目前有成熟的方案可以解决这个问题：

方案1：CSS原生实现（优先推荐） #

使用CSS标准属性scroll-padding-top，直接给滚动容器设置和固定头部等高的顶部内边距，浏览器所有原生滚动行为（包括PageUp/PageDown、空格翻页、锚点跳转、scrollIntoView API调用）都会自动将这部分高度识别为滚动视口的不可用区域，自动做偏移调整，无需额外逻辑处理，还可以直接替代你之前用的:target::before方案。

/* 全局页面滚动的场景 */
html {
  scroll-padding-top: var(--fixedHeaderHeight); /* 直接用你定义的头部高度变量即可，也可以写固定值比如200px */
}

/* 如果是自定义滚动容器，给对应的容器加该属性即可
.custom-scroll-container {
  scroll-padding-top: var(--fixedHeaderHeight);
}
*/

该属性兼容性覆盖所有现代浏览器（Chrome 81+、Firefox 68+、Safari 14.1+），无性能损耗，是目前最优的解决方案。

方案2：JS兼容实现 #

如果需要兼容极低版本浏览器，可以通过监听键盘事件手动调整滚动距离：

const HEADER_HEIGHT = 200; // 替换为你的固定头部实际高度
const scrollContainer = document.documentElement; // 自定义滚动容器的话替换为对应DOM节点

document.addEventListener('keydown', e => {
  // 过滤输入框、富文本编辑等场景的按键，避免影响正常输入
  const isInEditMode = ['INPUT', 'TEXTAREA'].includes(e.target.tagName) || e.target.isContentEditable;
  if (isInEditMode) return;

  // 计算实际滚动高度（视口高度减去头部高度）
  const validScrollHeight = scrollContainer.clientHeight - HEADER_HEIGHT;
  if (e.key === 'PageDown') {
    e.preventDefault();
    scrollContainer.scrollTop += validScrollHeight;
  } else if (e.key === 'PageUp') {
    e.preventDefault();
    scrollContainer.scrollTop -= validScrollHeight;
  }
});

该方案可以覆盖低版本浏览器场景，需要注意根据业务情况调整滚动容器和编辑场景的过滤逻辑。

内容的提问来源于stack exchange，提问作者Codemonkey