背景位置绑定鼠标滚动仅触发一次，如何实现持续响应？

原代码的核心问题是每次滚动直接覆盖背景位置值，而非基于当前位置累加偏移量，导致无法持续响应滚动操作。以下是修复方案：

修复思路 #

1. 用变量跟踪当前背景Y轴位置，避免每次滚动重置为单次偏移量
2. 将每次滚轮事件的deltaY（单次滚动偏移）累加到当前位置上
3. 用累加后的数值更新背景位置

完整代码 #

const el = document.querySelector("#module");
let currentBgY = 0; // 初始化背景位置变量

el.addEventListener("wheel", (e) => {
  e.preventDefault();
  currentBgY += e.deltaY; // 累加每次滚动的偏移量
  el.style.backgroundPositionY = `${currentBgY}px`;
}, { passive: false });

可选优化（限制滚动范围） #

如果需要防止背景位置超出合理范围（比如背景图边界），可以添加边界判断：

const el = document.querySelector("#module");
let currentBgY = 0;
const maxScroll = 1000; // 假设背景图可滚动的最大范围为1000px

el.addEventListener("wheel", (e) => {
  e.preventDefault();
  // 限制currentBgY在0到maxScroll之间
  currentBgY = Math.max(0, Math.min(maxScroll, currentBgY + e.deltaY));
  el.style.backgroundPositionY = `${currentBgY}px`;
}, { passive: false });

注意：必须设置passive: false，否则浏览器会阻止e.preventDefault()的执行（因为滚轮事件默认是被动监听）。

内容的提问来源于stack exchange，提问作者Marcos Cuadros