与滚动相关的背景位置仅运行一次

Question

我试图将背景位置动画绑定到鼠标滚动，但它只在向上或向下滚动时执行一次，而我希望背景位置在向两个方向滚动时继续变化。我怎样才能实现这个目标？现在它只检测到“第一个”滚动然后停止。

const el = document.querySelector("#module");

el.addEventListener("wheel", (e) => {
  e.preventDefault();
  el.style.backgroundPositionY = +e.deltaY + "px";
}, { passive: false });

已经尝试过笔中的内容：https://codepen.io/then00bcoder/pen/vYvQjgX

Answer 1

您需要将

e.deltaY

的值添加到现有值，而不是仅仅覆盖它：

const el = document.querySelector("#module");

el.addEventListener("wheel", (e) => {
  e.preventDefault();
  let bgPosY = 0;
  if (el.style.backgroundPositionY) bgPosY = parseInt(el.style.backgroundPositionY);
  el.style.backgroundPositionY = bgPosY + e.deltaY + "px";
}, { passive: false });