为网页正文的顶部和底部提供不同的颜色

Question

我的投资组合顶部有一个黑色的背景色，底部有一个白色的背景色。当您在顶部过度滚动时，身体的白色背景会显示一小段时间，创建一个不需要的对比，如下所示：

​

所以我要黑色的超卷代表顶部，白色的代表底部。最上面的一个简单的修复方法是将身体的背景色设置为黑色，然后我得到了底部的反向问题。我试着在身体和html页面上使用线性梯度，或者在顶部或底部放置带有负边距的彩色容器，但这是行不通的。是否有一种方法可以有不同的颜色为上和下超滚动？

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

示例代码沙箱动态(不能在沙箱中测试超滚动)：https://ns9yd.csb.app/

添加：“今日”当我在安卓上和窗口上用鼠标使用铬的时候，我意识到上面描述的滚动效果不会出现在这里。因此，这种效果可能是特定于触摸屏滚动。当我问这个问题时，我一直在使用MacBook。因此，只有在MacBooks上用触摸屏滚动时才会出现这种情况。

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

滚动体背景黑色(简单修复)：https://youtu.be/zYITinXs6OY

Answer 1

我知道这个问题已经过时了，但我也有一个类似的问题，我想出了一个解决办法。

通过在窗口的wheel事件上放置一个侦听器，我们可以检查滚动的增量。使用该信息，我们可以更改documentElement背景色以匹配页面的(黑色)“天花板”或(白色)“地板”：

let isCeiling = false;

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

    const delta = e.deltaY;

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

});

Answer 2

由于这种超滚动效果没有出现在android手机和windows pc上，我想是的(macos?)touchpad滚动特定的浏览器和带有dom和CSS的浏览器只是没有为这种罕见的行为提供api。

，但如果要防止过度滚动效果，请使用：

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

Answer 3

您可以用包装器和linear gradient将整个网站包装到这个包装器中，并为身体制作background: #000。

您可以在这里检查解决方案(例如，代码沙箱)

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

或者这里(活沙箱)

https://9l5p6.csb.app/