如何修改浏览器滚动超出网页区域的背景颜色？

针对你遇到的Edge和移动端Safari弹性滚动时，超出页面顶部/底部的背景色与页面元素（如红色导航、黑色页脚）不匹配的问题，有几个实用的解决方案：

方案1：利用HTML元素背景渐变控制超出区域 #

浏览器弹性滚动的超出区域默认显示<html>元素的背景（部分浏览器会继承<body>背景，可通过显式设置<html>背景覆盖）。你可以根据页面结构设置渐变背景，让超出区域颜色和对应页面元素匹配：

比如顶部导航为红色、页面主体白色、页脚黑色的场景，可使用如下样式：

html {
  /* 假设导航高度80px，页脚高度100px，可根据实际调整数值 */
  background: linear-gradient(
    to bottom,
    red 0, red 80px,
    white 80px, white calc(100% - 100px),
    black calc(100% - 100px), black 100%
  );
  min-height: 100%;
}

body {
  margin: 0;
  background-color: transparent; /* 让html的背景透出来 */
}

滚动超出顶部时会显示红色（匹配导航），超出底部时显示黑色（匹配页脚），中间区域保持页面主体的白色。

方案2：使用固定伪元素覆盖超出区域 #

通过给<html>添加固定定位的伪元素，分别设置顶部和底部超出区域的颜色，同时让页面主体在伪元素上方显示：

html::before, html::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  z-index: -1;
}

/* 顶部超出区域颜色，匹配导航 */
html::before {
  top: 0;
  height: 100vh;
  background-color: red;
}

/* 底部超出区域颜色，匹配页脚 */
html::after {
  bottom: 0;
  height: 100vh;
  background-color: black;
}

body {
  position: relative;
  z-index: 1;
  margin: 0;
  background-color: white; /* 页面主体背景 */
  min-height: 100vh;
}

这个方法无需计算元素高度，适配更灵活。

备选方案：禁用弹性滚动（不推荐，除非必要） #

如果你不需要弹性滚动的交互效果，可以直接禁用：

body {
  overscroll-behavior: none;
}

但会丢失浏览器自带的弹性滚动体验。

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