滚动时元素旋转角度无法累加更新的技术问题求助

你的代码核心问题出在变量作用域上：

• lastScrollTop和value被定义在scroll事件回调的forEach循环内部——每次触发滚动事件，这两个变量都会被重新初始化为0，导致每次滚动只能得到±25度的临时值，完全没法实现角度累计。
• lastScrollTop需要持续记录上一次的滚动位置，不能每次都重置；每个元素的旋转角度也需要独立保存，不能每次都从0开始计算。

修正方案 #

把lastScrollTop提到事件监听外部，同时给每个元素单独维护当前旋转角度（用自定义属性存储，确保状态不丢失）：

const elem = document.querySelectorAll(".rotator");
// 全局记录上一次的滚动位置，仅初始化一次
let lastScrollTop = 0;

// 给每个元素初始化旋转角度的自定义属性
elem.forEach(el => {
  el.dataset.rotation = 0;
});

window.addEventListener("scroll", function () {
  const st = window.pageYOffset || document.documentElement.scrollTop;
  // 计算本次滚动的角度变化值
  const delta = st > lastScrollTop ? 25 : (st < lastScrollTop ? -25 : 0);

  elem.forEach((el) => {
    // 读取当前元素的累计旋转角度
    let currentRotation = parseInt(el.dataset.rotation);
    // 更新角度
    currentRotation += delta;
    // 把更新后的角度存回自定义属性
    el.dataset.rotation = currentRotation;
    // 应用旋转样式
    el.style.transform = `rotate(${currentRotation}deg)`;
  });

  // 更新上一次的滚动位置，供下次判断方向使用
  lastScrollTop = st;
});

代码说明 #

1. lastScrollTop放在事件监听外部，只会初始化一次，每次滚动后更新为当前位置，确保能正确判断滚动方向。
2. 用元素的data-rotation自定义属性存储每个元素的当前旋转角度，避免每次滚动时角度被重置。
3. 每次滚动先计算角度变化量delta，再更新每个元素的累计角度并应用到样式上。

原有的CSS和HTML代码无需修改，直接替换JS代码即可实现需求。

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