css 给予不同颜色的顶部和底部的网页正文滚动

y1aodyip 于 2023-02-01 发布在其他

关注(0)|答案(5)|浏览(124)

我的公文包顶部背景色为黑色，底部背景色为白色，当你在顶部滚动时，正文部分的白色背景会短暂显示，从而产生不必要的对比，如下图所示：

所以我希望顶部是黑色的，底部是白色的。一个简单的解决办法就是把主体的背景色设置为黑色，但是底部的问题正好相反。我试着在主体和html页面上使用线性渐变，或者在顶部或底部放置带有负边距的彩色容器，但是没有效果。有没有办法让顶部和底部的滚动颜色不同呢？
示例代码沙盒：https://codesandbox.io/s/overscroll-color-ns9yd
示例代码沙箱Live（您无法在沙箱中测试过滚）：https://ns9yd.csb.app/

**补充：**今天，当我在安卓和windows上使用chrome时，我意识到上面描述的过卷效果并没有出现。因此，这种效果很可能是触摸板滚动特有的。当我问这个问题时，我一直在使用MacBook。所以，只有在使用触摸板滚动时，这种效果才会出现在MacBook上
Youtube演示过卷：https://youtu.be/Ec1D6KNlhIM
在机身背景为黑色时过滚（简单解决方法）：https://youtu.be/zYITinXs6OY

css

来源：https://stackoverflow.com/questions/68552282/give-different-color-to-top-and-bottom-of-the-webpage-body-overscroll

5条答案

按热度按时间

uajslkp61#

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

但如果要防止过卷效果，请用途：

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

赞(0）回复(0）举报 2023-02-01

smtd7mpg2#

我知道这个问题已经过时了，但我也遇到过类似的问题，并想出了解决办法。
通过在窗口的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;
    }

});

赞(0）回复(0）举报 2023-02-01

9gm1akwq3#

您可以将整个网站 Package 在wrapper中，并将linear gradient Package 到此wrapper中，并将background: #000作为主体
您可以在此处检查解决方案（示例代码沙盒）
https://codesandbox.io/s/youthful-dewdney-9l5p6?file=/index.html:95-149
或此处（实时沙盒）
https://9l5p6.csb.app/

赞(0）回复(0）举报 2023-02-01

j8yoct9x4#

与Bryant的解决方案类似，this CodePen通过将window的scrollY属性设置为页面的HTML标签上的一个属性，将其暴露给页面，从而允许任何CSS样式轻松引用该值：

// ... assuming some debounce function ...

// Store scroll position in page's data attribute
const storeScroll = () => {
  document.documentElement.dataset.scroll = window.scrollY;
}

// Listen for new scroll event
document.addEventListener('scroll', debounce(storeScroll), { passive: true });

现在，CSS可以智能地处理样式：

/* Applies to top of page */
html[data-scroll="0"] body {
  background-color: black;
}

/* Applies to bottom of page */
html:not([data-scroll="0"]) body {
  background-color: white;
}

在HTML中反映为：

<html data-scroll="{ scrollY }">
 ...
</html>

不幸的是，如果有人正在使用支持theme-color的较新版本的Safari，那么浏览器栏的颜色将随着body的background-color而改变，而且setting<meta name="theme-color" content="#ffffff">将 * 完全 * 覆盖过卷颜色。
当然，这一切都是假设你的网站用户启用了JS。一个更简单的非JS解决方案可能是this answer，其中body的background-color被设置为一个值，而它的全尺寸background-image被设置为一个单色像素。其他解决方案包括在页面上方和下方添加固定的屏幕外伪元素，并使用所需的颜色。

赞(0）回复(0）举报 2023-02-01

yrwegjxp5#

我把科比的回答归结为一行代码：

window.addEventListener('wheel', e => document.documentElement.style.backgroundColor = e.deltaY < 0 ? '#000' : '#fff');

然而，如果你在触控板上快速上下移动，背景色可以切换回白色，所以我现在使用这个：

window.addEventListener('wheel', () => document.documentElement.style.backgroundColor = window.pageYOffset > 100 ? '#fff' : '#000');

赞(0）回复(0）举报 2023-02-01

我来回答

css 给予不同颜色的顶部和底部的网页正文滚动

5条答案

相关问题

热门标签

最新问答