我有一个名为--color的css变量。我想在页面向下滚动时更改这个css变量的值。页面的滚动应该“擦洗”该值。

示例：--颜色从rgb(255,255,255）开始。当页面向下滚动时，该值越来越接近并最终在向下滚动时达到rgb(0,0,0）。当向上滚动时，该值应该缓慢地前进到rgb(255,255,255)，直到页面完全向上滚动时达到该值。

我一直试图用GSAP实现这一点，但还没有找到任何成功，尽管我相信用库一定是可能的。

---

顺晟科技：

当您提供代码段以显示已经尝试的内容时，这很有帮助。帮助确定答案的具体性。

要对您的问题给出一个一般性的答案，您可以使用定义颜色变化的点。定义应该开始更改的标记，并对回调函数使用诸如，，这样的属性来更改颜色。

这里有一个平均计算，您的颜色可能足够好，从浅色到深色再回到深色。它远未达到完美。

不幸的是，我不熟悉GSAP，但是 下面是链接，该链接描述了如何使用JS获取计算的样式和该样式的属性值。 您需要侦听scroll事件并更改侦听器内部css变量的值，如下所示:

gsap.to("body", {
  "--color": "black",
  scrollTrigger: {
    start: 0,
    end: "max",
    scrub: true
  }
});

以下是一些有用的链接。

https://developer.mozilla.org/en-美国/docs/web/api/cssstyledeclaration/setproperty https://developer.mozilla.org/en-美国/docs/web/api/cssstyledeclaration/getPropertyValue https://developer.mozilla.org/en-美国/docs/web/api/window/getcomputedstyle

当然，给您:

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论坛