给网页的顶部和底部不同的颜色 body overscroll

Question

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

所以我想要顶部为黑色滚动条，底部为白色滚动条。顶部的一个简单修复是将 body 的 background-color 设置为黑色，但随后我得到底部的相反问题。我尝试在 body 和 html-page 上使用 linear-gradient 或将带有负边距的彩色容器放在顶部或底部，但这没有用。有没有办法让顶部和底部的滚动条有不同的颜色？

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

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

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

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

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

Answer 1

您可以将整个网站包装在包装器中，然后 linear gradient 到此包装器并为 body

创建 background: #000

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

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

或在这里（实时沙盒）

https://9l5p6.csb.app/

Answer 2

由于这种过度滚动效果没有出现在 android phone 和 windows 电脑上，我假设它是（macos？）触摸板滚动特定和带有 dom 和 CSS 只是不为这种罕见的行为提供 api。

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

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

Answer 3

我知道这个问题已经过时了，但我遇到了类似的问题并提出了解决方案。

通过在 window 的 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;
    }

});

给网页的顶部和底部不同的颜色 body overscroll

give different color to top and bottom of the webpage body overscroll

html

css

macos

overscroll