css - 滚动位置作为CSS中的变量？

Question

我正在处理一个具有非常复杂的非默认滚动行为的网页。东西应该根据你滚动的次数和类似的东西在屏幕上移动。我知道我可以使用 javascript 在不同位置添加类，如下所示:

wrap.on("scroll", function(e) {

   if (this.scrollTop > 147) {
     wrap.addClass("fix-search");
   } else {
     wrap.removeClass("fix-search");
   }
});

但现在我需要实际的滚动位置作为 css 中的值。我想做这样的事情，这应该会导致一个对象飞过屏幕的速度是你滚动速度的两倍。

.floatingObject {
   position: absolute;
   bottom: calc(var(--scrollPosition)*2);
}

这样的事情可能吗？您能否将值存储在 DOM 中并将其作为 css 变量/属性等检索？

Answer 1

是的，

在你的 scrollListener 中添加如下内容:

document.documentElement.style.setProperty('--scrollPosition', this.scrollTop);

在你的 css :root {--scrollPosition:0}

请注意，这在 IE 中不受支持，因此您需要在任何要使用该变量的地方进行回退。