Question

我正在使用非常复杂的非默认滚动行为的网页上工作。根据您滚动的数量和类似的东西，假设东西在屏幕上移动。我知道我可以使用javascript在不同的位置添加类，如下所示：

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

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

但是现在我需要将实际的scrollposition作为css中的值。我想做这样的事情，这会导致一个物体在屏幕上飞起两倍，就像你滚动一样快。

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

这样的事情可能吗？你可以将值存储在DOM中并将其作为css-variable / property等检索吗？

Answer 1

是，

在您的scrollListener中，只需添加如下内容：

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

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

中

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

Scrollposition作为css中的变量？

1 个答案: