我的公文包顶部背景色为黑色,底部背景色为白色,当你在顶部滚动时,正文部分的白色背景会短暂显示,从而产生不必要的对比,如下图所示:
所以我希望顶部是黑色的,底部是白色的。一个简单的解决办法就是把主体的背景色设置为黑色,但是底部的问题正好相反。我试着在主体和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
5条答案
按热度按时间uajslkp61#
由于这种过卷效果没有出现在android手机和windows pc上,我假设它是(macos?)触摸板滚动特有的,带有dom和CSS的浏览器只是没有为这种罕见的行为提供API。
但如果要防止过卷效果,请用途:
smtd7mpg2#
我知道这个问题已经过时了,但我也遇到过类似的问题,并想出了解决办法。
通过在窗口的
wheel
事件上放置一个侦听器,我们可以检查滚动的增量,然后根据该信息更改documentElement
的背景颜色,使其与页面的“天花板”(黑色)或“地板”(白色)相匹配: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/
j8yoct9x4#
与Bryant的解决方案类似,this CodePen通过将
window
的scrollY
属性设置为页面的HTML
标签上的一个属性,将其暴露给页面,从而允许任何CSS样式轻松引用该值:现在,CSS可以智能地处理样式:
在HTML中反映为:
不幸的是,如果有人正在使用支持
theme-color
的较新版本的Safari,那么浏览器栏的颜色将随着body
的background-color
而改变,而且setting<meta name="theme-color" content="#ffffff">
将 * 完全 * 覆盖过卷颜色。当然,这一切都是假设你的网站用户启用了JS。一个更简单的非JS解决方案可能是this answer,其中
body
的background-color
被设置为一个值,而它的全尺寸background-image
被设置为一个单色像素。其他解决方案包括在页面上方和下方添加固定的屏幕外伪元素,并使用所需的颜色。yrwegjxp5#
我把科比的回答归结为一行代码:
然而,如果你在触控板上快速上下移动,背景色可以切换回白色,所以我现在使用这个: