Javascript 更改影响许多SVG的滚动css变量的性能

在最近的一个项目中，我采纳了Dave Rupert的想法（）并付诸实施。我在页面右侧有几个svg形状的卡盘（23个相对简单的形状，都是内联svg），它们都以不同的速度滚动，创造了一种很酷的效果

Dave的想法的基本思想是在scroll上更改一个css变量，元素在calc（）语句中使用该变量来更改其transform属性，在页面上下移动，从而创建视差效果

以下是他的片段：

const title = document.querySelector('h1.title');
const speed = 0.2;
title.style.transform = 'translateY( calc( var(--scrollparallax) * 1px ) )';

window.addEventListener('scroll', function() {
  title.style.setProperty("--scrollparallax", (document.body.scrollTop || document.documentElement.scrollTop) * speed);
});

我基本上做了同样的事情，但在我的scss文件中放了几个不同的速度变量和TransformCalc语句。我还必须为每个小块设置不同的“滚动视差”变量，因为它们与页面顶部的距离会影响其工作方式

*SCSS*

$speed1: 0.15px;
$speed2: 0.1px;
$speed3: 0.05px;
$speed4: 0.2px;

.firstSvgShape {
  transform: translateY( calc( var(--dist) * #{$speed1}) );
}
.secondSvgShape {
  transform: translateY( calc( var(--dist) * #{$speed3}) );
}

(etc...)

*JS*
const hexGroup1 = document.querySelector('.hex-group-1');
const hexGroup2 = document.querySelector('.hex-group-2');
const hexGroup3 = document.querySelector('.hex-group-3');

window.addEventListener('scroll', () => {

  const top = document.body.scrollTop || document.documentElement.scrollTop;

  if (hexGroup1) {
    hexGroup1.style.setProperty("--dist", hexGroup1.offsetTop - top);
  }

  if (hexGroup2) {
    hexGroup2.style.setProperty("--dist", hexGroup2.offsetTop - top);
  }

  if (hexGroup3) {
    hexGroup3.style.setProperty("--dist", hexGroup3.offsetTop - top);
  }

});

最初，我实际上用js做了所有的事情，每个svg元素上都有不同的css变量，这些变量随着页面的滚动而改变。我注意到页面上有些滞后（在我翻新的13英寸2015 macbook pro 27英寸4k显示器上），但这并不重要

我对它进行了重构，只在一个滚动事件函数中更改了4个css变量，以及css中的所有其他变量，我认为这会给我带来不错的性能提升，但基本上是一样的。滚动并不像同一站点上的其他页面那样流畅

---

有什么我可以做的，以获得这种效果很好，顺利滚动？放弃css变量，尝试其他方法？断开内联SVG并使用img标记

看到你的代码会很有帮助，因为这是一个很慢的代码。当然，我会在问题中加上这个。事实上，昂贵的代码就在那里。您可以在

滚动

事件中修改DOM，该事件以高速率触发。请参阅节流的代码示例。我认为主要问题在于scroll事件。。。只是不知道没有它怎么工作，你知道吗？不能使用debouncer/setTimeout/任何类似的工具，因为整个要点是它可以随着滚动而立即平滑地更改。@WillHawks在前面的评论中检查该链接。与“滚动”处理程序一起使用

.requestAnimationFrame（）

。浏览器非常积极地启动“滚动”。