如何实现页面滚动时两个Div向相反方向滚动？

问题核心 #

你的代码存在两个关键问题：

1. 滚动进度计算逻辑错误：直接用window.scrollY / parallaxSection.clientHeight得到的百分比无法匹配容器在视口中的实际滚动范围，导致col1的移动逻辑失效。
2. DOM元素引用缺失：原代码未明确获取parallaxSection、column1、column2三个元素，会引发JS执行报错，进而卡住col1的滚动效果。

修正后的完整代码 #

HTML（仅调整初始位置更直观，结构不变）

<div class="tw-h-[200vh] tw-flex tw-relative tw-overflow-clip tw-snap-end tw-snap-y" id="parallax-img-section">
  <div class="tw-absolute tw-w-full tw-h-[200vh]">
    <div class="tw-sticky tw-top-0 tw-left-0 ">
      <img src="https://images.pexels.com/photos/33703/relay-race-competition-stadium-sport.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" srcset="" class="tw-w-full tw-h-full tw-object-cover">
    </div>
    <div class="tw-absolute tw-top-0 tw-left-0 tw-bg-[#030303da] tw-w-[100%] tw-h-[100%]">
      <!-- 遮罩层 -->
    </div>
  </div>
  <div class="tw-flex tw-w-[60%] tw-gap-[5%] tw-place-content-center">
    <div class="tw-h-fit tw-flex tw-flex-col tw-gap-4 tw-w-fit tw-bg-white tw-absolute tw-left-[10%] scrolling-cols" style="top: -100%;" id="col1">
      <div class="tw-h-[350px] tw-w-[250px] tw-rounded-lg tw-shadow-lg tw-flex tw-overflow-clip">
        <img src="https://images.pexels.com/photos/5641089/pexels-photo-5641089.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" srcset="" class="tw-w-full tw-h-full">
      </div>
      <!-- 其他图片内容 -->
    </div>

    <div class="tw-h-full tw-w-fit tw-flex tw-flex-col tw-gap-4 tw-absolute tw-top-[100%] tw-left-[30%] scrolling-cols" id="col2">
      <div class="tw-h-[350px] tw-w-[250px] tw-rounded-lg tw-shadow-lg tw-flex tw-overflow-clip">
        <img src="https://images.pexels.com/photos/159515/football-american-football-runner-player-159515.jpeg?auto=compress&cs=tinysrgb&w=600" alt="" srcset="" class="tw-w-full tw-h-full">
      </div>
      <!-- 其他图片内容 -->
    </div>
  </div>
</div>

JavaScript

// 先获取目标DOM元素
const parallaxSection = document.getElementById('parallax-img-section');
const column1 = document.getElementById('col1');
const column2 = document.getElementById('col2');

window.addEventListener("scroll", function() {
  const boundingRect = parallaxSection.getBoundingClientRect();
  const containerHeight = parallaxSection.clientHeight;
  const viewportHeight = window.innerHeight;
  const scrollRange = containerHeight - viewportHeight;
  
  // 计算滚动进度：0表示容器刚进入视口，1表示容器完全离开视口
  const progress = Math.max(0, Math.min(1, -boundingRect.top / scrollRange));

  // col1从容器顶部上方向下移动，移动距离与滚动进度成正比
  column1.style.transform = `translateY(${progress * scrollRange}px)`;
  // col2从容器底部下方向上移动，移动距离与滚动进度成正比
  column2.style.transform = `translateY(-${progress * scrollRange}px)`;
});

关键调整说明 #

• 精准滚动进度：通过-boundingRect.top / scrollRange计算0~1的进度值，完全匹配容器在视口中的滚动区间，避免全局滚动值导致的错位。
• 同步移动逻辑：统一使用px作为移动单位，确保两个列的移动距离完全同步，实现相向滚动的预期效果。
• 修复元素引用：明确获取所需DOM元素，解决因变量未定义导致的JS执行中断问题。

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