如何将forEach循环中的变量传递到addEventListener('scroll')方法中

看起来你遇到了闭包和变量作用域的典型陷阱，同时还有变量名冲突的问题，我来一步步帮你解决：

问题诊断 #

你的代码里有两个核心问题：

1. 变量名冲突：scroll事件回调里的参数m会覆盖forEach循环中的m，此时回调里的m其实是ScrollEvent对象，不是你定义的乘数变量。
2. 闭包陷阱：forEach循环里的m和i是共享的函数作用域变量，当scroll事件触发时，循环已经执行完毕，所有回调都会引用最后一次循环的m和i值，达不到每个元素对应不同乘数的效果。

解决方案一：用块级作用域保存独立变量 #

利用let的块级作用域特性，让每个forEach迭代都拥有独立的变量副本，这样scroll回调就能正确绑定当前元素的乘数：

(function parallax() {
  const parallaxElements = document.querySelectorAll('.js-parallax');
  
  parallaxElements.forEach(function(el, index) {
    // 用let声明独立的乘数变量，每个迭代都有自己的副本
    const multiplier = index % 2 === 0 ? 1 : 2;
    console.log(`当前元素乘数: ${multiplier}，索引: ${index}`);
    
    // 事件回调不要用m当参数，避免覆盖外部变量
    document.addEventListener('scroll', function() {
      console.log(`滚动时的乘数: ${multiplier}，索引: ${index}`);
      // 这里可以加入你的视差逻辑，比如：
      // const scrollTop = window.pageYOffset;
      // el.style.transform = `translateY(${scrollTop * multiplier * 0.1}px)`;
    });
  });
})();

解决方案二：性能优化版（推荐） #

如果页面上有很多视差元素，给每个元素都绑定scroll事件会影响性能。更好的做法是只绑定一次scroll事件，提前把乘数存在元素的dataset中，滚动时统一计算：

(function parallax() {
  const parallaxElements = document.querySelectorAll('.js-parallax');
  
  // 先给每个元素存储对应的乘数
  parallaxElements.forEach(function(el, index) {
    el.dataset.parallaxMultiplier = index % 2 === 0 ? 1 : 2;
  });

  // 只绑定一次scroll事件，性能更优
  document.addEventListener('scroll', function() {
    const scrollTop = window.pageYOffset;
    parallaxElements.forEach(function(el) {
      const multiplier = parseFloat(el.dataset.parallaxMultiplier);
      // 执行视差变换（0.1是缩放系数，可根据需求调整）
      el.style.transform = `translateY(${scrollTop * multiplier * 0.1}px)`;
    });
  });
})();

关键要点总结 #

• 避免事件回调参数和外部变量重名，防止变量被意外覆盖。
• 用let/const的块级作用域，或者闭包（旧环境可用立即执行函数），确保每个迭代的变量能被事件回调正确捕获。
• 尽量减少scroll事件监听的数量，批量处理元素能大幅提升页面性能。

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