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

y1aodyip  于 2023-02-01  发布在  其他
关注(0)|答案(5)|浏览(123)

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

所以我希望顶部是黑色的,底部是白色的。一个简单的解决办法就是把主体的背景色设置为黑色,但是底部的问题正好相反。我试着在主体和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

uajslkp6

uajslkp61#

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

但如果要防止过卷效果,请用途:

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

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;
    }

});
9gm1akwq

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/

j8yoct9x

j8yoct9x4#

与Bryant的解决方案类似,this CodePen通过将windowscrollY属性设置为页面的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,那么浏览器栏的颜色将随着bodybackground-color而改变,而且setting<meta name="theme-color" content="#ffffff">将 * 完全 * 覆盖过卷颜色。
当然,这一切都是假设你的网站用户启用了JS。一个更简单的非JS解决方案可能是this answer,其中bodybackground-color被设置为一个值,而它的全尺寸background-image被设置为一个单色像素。其他解决方案包括在页面上方和下方添加固定的屏幕外伪元素,并使用所需的颜色。

yrwegjxp

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');

相关问题