我有一个名为 --color 的 CSS 变量。我想在页面向下滚动时更改这个 css 变量的值。页面的滚动应该“擦洗”该值。
示例：--color 从 rgb(255, 255, 255) 开始。随着页面向下滚动，该值越来越接近并最终在向下滚动时达到 rgb(0, 0, 0)。向上滚动时，该值应缓慢返回到 rgb(255, 255, 255)，直到页面完全向上滚动时达到。
我一直在尝试使用 GSAP 实现这一目标，但尚未取得任何成功，尽管我相信图书馆一定可以做到。
【问题讨论】：
标签： javascript html css gsap
没问题，给你：
gsap.to("body", {
"--color": "black",
scrollTrigger: {
start: 0,
end: "max",
scrub: true
}
});
https://codepen.io/GreenSock/pen/WNOzWaM?editors=0110
顺便说一句，https://greensock.com/forums 有专门的 GSAP 论坛
【讨论】：
很遗憾，我不熟悉 GSAP，但是 这里是the link，它描述了如何使用 JS 获取计算的样式和该样式的属性值。 您需要监听滚动事件并更改监听器内部的 css 变量的值，如下所示：
document.addEventListener('scroll', function(e) {
var root = document.querySelector(':root');
var newColor = // do your color calculations here;
root.style.setProperty('--color', newColor);
}
这里有一些有用的链接。
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/getPropertyValue https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
【讨论】：
这是您的rgb() 颜色的平均计算，它可能足够精细，可以从浅到深再返回。远非完美。
const body = document.querySelector("body ");
const bodyHeight = document.querySelector("body").offsetHeight;
body.innerHTML = '<p style="position:sticky;top:0;">Body Height: ' + bodyHeight + 'px <br>Window Height: ' + window.innerHeight + 'px</p>';
const root = document.querySelector(":root");
window.addEventListener("scroll", (event) => {
let scroll = this.scrollY;
let ratio = (scroll / (bodyHeight - window.innerHeight ) ) ;
let rgbvalue = 255 - ratio * 255;
root.style.setProperty( "--color", "rgba(" + rgbvalue + "," + rgbvalue + "," + rgbvalue + ")"
);
console.log(rgbvalue);
});body {
background: var(--color, rgb(255, 255, 255));/* use defaul trgb(255, 255, 255) untill var is set from js */
height: 300vh;
}<div></div>【讨论】：
当您提供代码 sn-p 来显示已经尝试过的内容时，它会很有帮助。有助于确定答案的具体性。
要对您的问题给出一般性答案，您可以使用ScrollTrigger 来定义颜色变化的点。定义应该开始更改的标记，并在回调中使用 coloronEnter、onLeave、onEnterBack 等属性来更改颜色。
【讨论】：