如何让共用同值变量的滚动函数独立运行？解决横向滚动冲突

问题根源 #

你的代码存在两个核心问题：

• 全局变量复用：所有模块的状态变量都在全局作用域，虽scrollTop和scrollTop2值相同不直接冲突，但全局变量易引发后续维护问题；
• 初始化顺序错误：先获取两个模块的offsetTop，再设置第一个模块的高度，导致第二个模块的实际位置和预存的distFromTop2不符，滚动判断条件失效。

解决方案：封装独立逻辑 + 修正初始化顺序 #

通过通用函数封装每个横向滚动模块的逻辑，让变量作用域隔离，同时修正初始化顺序确保位置计算准确：

// 通用横向滚动初始化函数
function initHorizontalScroll(sectionSelector, wrapperSelector, scrollDirection = 'left') {
  const windowWidth = window.innerWidth;
  const section = document.querySelector(sectionSelector);
  const contentWrapper = document.querySelector(wrapperSelector);

  // 1. 计算内容总宽度，设置section高度（让页面有足够滚动空间触发横向滚动）
  const contentTotalWidth = contentWrapper.scrollWidth;
  section.style.height = `${contentTotalWidth}px`;

  // 2. 重新计算模块的顶部偏移（此时section高度已设置，后续元素位置准确）
  const sectionTopOffset = section.offsetTop;
  // 模块的有效滚动区间：从模块顶部，到滚动完所有横向内容的位置
  const maxScrollPosition = sectionTopOffset + contentTotalWidth - windowWidth;

  // 滚动事件处理函数
  function handleScroll() {
    const currentScrollTop = window.pageYOffset;

    if (currentScrollTop >= sectionTopOffset && currentScrollTop <= maxScrollPosition) {
      const scrollOffset = currentScrollTop - sectionTopOffset;
      // 根据方向设置横向偏移：左移对应内容右滚，右移对应内容左滚
      const transformStyle = scrollDirection === 'left' 
        ? `translateX(-${scrollOffset}px)` 
        : `translateX(${scrollOffset}px)`;
      contentWrapper.style.transform = transformStyle;
    } else {
      // 滚动离开模块区间时复位偏移（可选，根据需求删除此块）
      contentWrapper.style.transform = '';
    }
  }

  // 添加滚动监听
  window.addEventListener('scroll', handleScroll);
}

// 初始化两个横向滚动模块
initHorizontalScroll('.horizontal-section', '.element-wrapper', 'left');  // Section1：内容从左向右滚动
initHorizontalScroll('.horizontal-section2', '.element-wrapper2', 'right'); // Section2：内容从右向左滚动

关键优化点 #

• 作用域隔离：每个模块的变量（如sectionTopOffset、contentTotalWidth）都是函数局部变量，彻底避免冲突；
• 顺序修正：先设置模块高度，再计算顶部偏移，确保位置值准确；
• 逻辑复用：通过scrollDirection参数控制滚动方向，不用重复编写相似代码；
• 独立监听：每个模块的滚动处理逻辑独立，互不干扰。

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