setProperty("left",...) on absolute div 视差慢

Question

我想用 3 个以不同速度移动的不同叠加图片构建横向滚动视差效果，我的代码如下：

<div class="parallax-wrapper">
    <div class="parallax1 parallax"></div>
    <div class="parallax2 parallax"></div>
    <div class="parallax3 parallax"></div>
</div>

.parallax-wrapper {
  width: 100%;
  height: 100%;
  background-color: black;
}
.parallax {
  position: fixed;
  display: inline-block;
  width: 500%;
  height: 100%;
  left: 0;
  background-size: auto 100%;
}
.parallax1 {
  background-image: url("../assets/Parallax/Parallax1.svg");
}
.parallax2 {
  background-image: url("../assets/Parallax/Parallax2.svg");
}
.parallax3 {
  background-image: url("../assets/Parallax/Parallax3.svg");
}

以及滚动时调用的函数：

function updateScroll(scrollDest){
    parallax1.style.setProperty("left", "-" + (scrollDest * 0.3) + "px")
    parallax2.style.setProperty("left", "-" + (scrollDest * 0.2) + "px")
    parallax3.style.setProperty("left", "-" + (scrollDest * 0.1) + "px")
}

我以前用过不同的方法，但几乎没有浏览器支持，所以我将其更改为这种方法，我认为它非常轻巧，但遗憾的是，它在移动设备上非常滞后，在我的台式电脑上也不是很流畅，为什么这个方法这么慢，如何改进？

Answer 1

我猜你可能只是在滚动时向 window 添加了事件侦听器，这导致在每个滚动事件上调用 updateScroll。我建议使用节流和去抖动来减少事件数量（你可以在其他堆栈问题“Simple throttle in JavaScript”中找到很好的例子。

减少事件数量后会有点奇怪，所以我建议在左侧添加过渡，如下所示：

.parallax {
  transition: left .2s;
}

setProperty("left",...) on absolute div 视差慢

setProperty("left",...) on absolute div slow in parallax

html

javascript

css

parallax