如何修复原生JavaScript编写的水平滚动脚本X轴偏移问题

嘿，我看了你的水平滚动页面代码，遇到的偏移量不准和切换区域时的内容残留问题其实挺常见的，咱们一步步来解决它！

问题根源分析 #

你的核心问题有两个：

1. 水平偏移计算逻辑不对：直接用垂直滚动的差值作为水平偏移量，没有考虑垂直滚动范围和水平内容总宽度的比例关系，导致滚动时偏移要么过度要么不足。
2. 退出滚动区域时状态没重置：当滚动离开水平滚动区域时，wrapper的transform属性没有被正确重置，所以视口会残留之前的内容。

具体修复方案 #

1. 修正水平偏移量的计算逻辑 #

我们需要把垂直滚动的进度（从进入spacer到滚完spacer的比例）映射到水平内容的总滚动距离上，这样就能保证滚动的对应关系准确：

首先，先缓存一些不会动态变化的DOM属性（减少重复查询DOM，提升性能）：

// 放在函数外面，只查询一次
const spacer = document.querySelector(".spacer");
const wrapper = document.querySelector(".wrapper");
const windowEffect = document.querySelector(".windowEffect");
const spacerTop = spacer.offsetTop;
const totalHorizontalWidth = wrapper.offsetWidth; // 水平内容的总宽度
const spacerHeight = window.innerWidth * 4; // 你定义的垂直滚动范围
const verticalScrollEnd = spacerTop + spacerHeight; // 垂直滚动的结束位置
const horizontalMaxOffset = totalHorizontalWidth - window.innerWidth; // 水平需要滚动的最大距离

然后在滚动函数里计算滚动进度和对应的水平偏移：

const horizontalScrollEnabler = () => {
  const scrollFromTop = window.scrollY;

  if (scrollFromTop > spacerTop && scrollFromTop < verticalScrollEnd) {
    // 处于水平滚动区域内
    windowEffect.style.position = "fixed";
    windowEffect.style.top = "0";
    // 计算滚动进度（0到1之间，0是刚进入区域，1是滚完整个区域）
    const scrollProgress = (scrollFromTop - spacerTop) / spacerHeight;
    // 根据进度计算水平偏移
    const translateThisMuch = scrollProgress * horizontalMaxOffset;
    wrapper.style.transform = `translateX(-${translateThisMuch}px)`;
  } 
  // 下面处理退出滚动区域的情况
  else if (scrollFromTop <= spacerTop) {
    // 滚到水平区域上方，重置到初始状态
    windowEffect.style.position = "absolute";
    windowEffect.style.top = "0";
    wrapper.style.transform = 'translateX(0)';
  } 
  else if (scrollFromTop >= verticalScrollEnd) {
    // 滚到水平区域下方，固定到水平内容的最右端
    windowEffect.style.position = "absolute";
    windowEffect.style.top = `${spacerHeight}px`;
    wrapper.style.transform = `translateX(-${horizontalMaxOffset}px)`;
  }

  requestAnimationFrame(horizontalScrollEnabler);
};

2. 解决内容残留问题 #

上面的代码已经处理了这个问题：

• 当滚动回spacer区域上方时，把wrapper的transform设为translateX(0)，让水平内容回到初始位置。
• 当滚动到spacer区域下方时，把wrapper固定在水平滚动的最右端（translateX(-${horizontalMaxOffset}px)），这样进入spacerSecond区域时就不会残留之前的水平内容。

3. 额外优化：避免重复判断 #

我把原来的多个if改成了if-else if结构，这样每次滚动只会执行一个分支，逻辑更清晰，也避免了重复设置样式的问题。

为什么这样改能解决问题？ #

• 比例映射：通过滚动进度把垂直滚动的距离转换成对应的水平偏移，保证垂直滚完整个spacer时，水平内容刚好完整滚动过视口，不会出现偏移过多或不足的情况。
• 状态明确：在退出水平滚动区域时，强制重置wrapper的位置，彻底解决内容残留的问题。
• 性能提升：缓存静态DOM属性，减少每次滚动时的DOM查询，让动画更流畅。

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