为网页正文过度滚动的顶部和底部赋予不同的颜色答案

【问题标题】：give different color to top and bottom of the webpage body overscroll为网页正文过度滚动的顶部和底部赋予不同的颜色
【发布时间】：2021-10-03 17:10:46
【问题描述】：

我的作品集顶部为黑色，底部为白色。当您在顶部过度滚动时，主体的白色背景会显示片刻，从而产生如下不需要的对比：

所以我希望顶部为黑色过度滚动，底部为白色。顶部的一个简单修复是将主体的背景颜色设置为黑色，但随后我得到了底部的相反问题。我尝试在 body 和 html-page 上使用线性渐变或将具有负边距的彩色容器放在顶部或底部，但这不起作用。有没有办法为顶部和底部过度滚动设置不同的颜色？

沙盒直播示例代码（您无法在沙盒中测试过度滚动）： https://ns9yd.csb.app/

补充： 今天，当我在 android 和 windows 上用鼠标使用 chrome 时，我意识到所描述的过度滚动效果并没有出现在那里。因此，效果可能特定于触摸板滚动。当我问这个问题时，我一直在使用 MacBook。所以它可能只在使用触摸板滚动时出现在 MacBooks 上

Youtube 过度滚动演示： https://youtu.be/Ec1D6KNlhIM

用黑色主体背景过度滚动（简单修复）： https://youtu.be/zYITinXs6OY

【问题讨论】：

这能回答你的问题吗？ Fixed gradient background with css
@GucciBananaKing99 不，它没有。我也刚刚意识到过度滚动行为不会发生在 android 或 windows chrome 上。它可能特定于 MacBook（或笔记本电脑）触摸板滚动

【解决方案1】：

您可以将整个网站包装在包装器中，并将linear gradient 包装到此包装器中并为正文制作background: #000

您可以在此处查看解决方案（示例代码沙箱）

或在这里（实时沙盒）

【讨论】：

【解决方案2】：

由于这种过度滚动效果没有出现在 android 手机和 windows pc 上，我认为它是（macos？）特定于触摸板滚动的，带有 dom 和 CSS 的浏览器只是不为这种罕见的行为提供 api。

但如果你想防止过度滚动效果使用：

  html,
  body {
    height: 100%;
    overscroll-behavior-y: none;
  }

【讨论】：