双屏反向滚动：如何实现左右列图像精准平行对齐？

你的核心问题在于滚动逻辑仅简单映射scrollTop值，未匹配左右列的高度比例和布局约束，加上flex布局的间距设置和fixed元素高度未同步，导致仅在特定分辨率下能对齐。

解决方案核心思路 #

• 强制同步左右列高度，确保滚动范围完全匹配
• 基于滚动比例计算反向偏移，而非直接反向映射滚动像素
• 修正布局细节，消除默认样式和flex间距带来的高度计算误差

修改后的完整代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="full-page">
  <div class="column-left">
    <div class="image">
      <img src="https://picsum.photos/200/300">
    </div>
    <div class="image">
      <img src="https://picsum.photos/200/300">
    </div>
    <div class="image">
      <img src="https://picsum.photos/200/300">
    </div>
  </div>
  <div class="column-right">
    <div class="image">
      <img src="https://picsum.photos/200/300">
    </div>
    <div class="image">
      <img src="https://picsum.photos/200/300">
    </div>
    <div class="image">
      <img src="https://picsum.photos/200/300">
    </div>
  </div>
</div>

<style>
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.full-page {
  display: flex;
  width: 100%;
}

.full-page .column-left {
  width: 50%;
  display: flex;
  flex-direction: column;
}

.full-page .column-right {
  width: 50%;
  position: fixed;
  left: 50%;
  top: 0;
  display: flex;
  flex-direction: column-reverse;
}

.image {
  width: 100%;
}

.image img {
  width: 100%;
  display: block;
}

.image + .image {
  margin-top: 20px;
}
</style>

<script>
$(document).ready(function() {
  const $leftCol = $(".column-left");
  const $rightCol = $(".column-right");
  
  // 同步左右列高度
  function syncHeights() {
    $rightCol.height($leftCol.height());
  }
  
  syncHeights();
  $(window).on('resize', syncHeights);
  
  $(window).on('scroll', function() {
    const windowH = $(window).height();
    const leftTotalH = $leftCol.height();
    const scrollableH = leftTotalH - windowH;
    const scrollRatio = $(window).scrollTop() / scrollableH;
    
    const rightOffset = scrollRatio * scrollableH;
    $rightCol.css('transform', `translateY(-${rightOffset}px)`);
  });
});
</script>

关键改动说明 #

1. 布局同步

   • 给.full-page添加flex布局，让左右列各占50%宽度，彻底避免布局错位
   • 移除justify-content: space-between，改用固定margin控制图像间距，确保高度计算精准
   • 右列改用top:0定位，通过transform: translateY实现滚动，比修改bottom更稳定

2. 滚动逻辑优化

   • 初始化和窗口resize时同步左右列高度，保证滚动范围完全一致
   • 基于滚动比例计算偏移：滚动到顶部时比例为0，右列无偏移；滚动到底部时比例为1，右列完全反向到位，确保首尾图像100%对齐

3. 细节修复

   • 图像设置display:block消除默认行高间隙，避免高度计算误差
   • 禁用横向滚动条，防止布局溢出

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