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

Question

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

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

示例代码沙箱： https ://codesandbox.io/s/overscroll-color-ns9yd

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

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

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

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

Answer 1

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

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

https://codesandbox.io/s/youthful-dewdney-9l5p6?file=/index.html:95-149

或在这里（实时沙盒）

https://9l5p6.csb.app/

Answer 2

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

但是，如果您想防止过度滚动效果，请使用：

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

Answer 3

我知道这个问题已经过时了，但我遇到了类似的问题并想出了一个修复方法。

通过在窗口事件上放置一个监听器wheel，我们可以检查滚动的增量。有了这些信息，我们可以更改documentElement背景颜色以匹配页面的（黑色）“天花板”或（白色）“地板”：

let isCeiling = false;

window.addEventListener('wheel', (e) => {

    const delta = e.deltaY;

    if (delta < 0 && !isCeiling) {
        document.documentElement.style.background = 'black';
    } else if (delta > 0 && isCeiling) {
        document.documentElement.style.background = 'white';
    }

});