如何禁用页面上下滚动溢出边界或修改溢出背景色？

一、修改溢出背景色（快速适配深色主题） #

直接给html和body设置与你深色主题匹配的背景色，滚动到页面边界时就会显示该深色，替代默认的白色。

修改你的CSS代码如下：

html, body {
    margin: 0;
    background-color: #121212; /* 替换成你网站的深色主题背景色 */
}

#block{
    margin: 0%;
    display: flex;
    padding: auto;
    height: 1000px;
    background-color: #2d2d2d; /* 内容区也建议用深色，统一主题 */
}

注：必须同时给html和body设置背景色，部分浏览器会优先读取html的背景作为滚动溢出区域的颜色。

二、禁用边界弹性滚动（彻底禁止超出范围滚动） #

如果想完全消除滚动到边界后的回弹效果，使用CSS的overscroll-behavior属性即可：

html {
    overscroll-behavior: none; /* 禁用整个页面的弹性滚动 */
    background-color: #121212; /* 搭配深色背景，避免极端情况出现白色 */
}

body {
    margin: 0;
    background-color: #121212;
}

#block{
    margin: 0%;
    display: flex;
    padding: auto;
    height: 1000px;
    background-color: #2d2d2d;
}

• overscroll-behavior: none会阻止浏览器默认的弹性滚动行为，滚动到页面边缘时不会再出现超出的空白区域。
• 主流浏览器（Chrome、Firefox、Edge）均支持该属性，新版Safari也已兼容，无需额外前缀。

针对页眉页脚的适配说明 #

由于你的页眉和页脚未使用fixed/sticky定位，只要给html和body设置了深色背景，滚动时超出页眉/页脚的区域就会显示深色，不会再出现刺眼的白色。

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