如何实现两张相同垂直长图的连续循环自动滚动？

核心思路 #

用两张相同图片拼接成可滚动容器，监听页面滚动事件动态调整图片容器的偏移量，当滚动距离等于单张图片高度时重置偏移，实现无缝循环滚动，无需依赖第三方npm库。

实现代码 #

HTML 结构

<!-- 滚动容器，限制高度为视口高度，溢出隐藏 -->
<div class="scroll-container">
  <!-- 图片包裹容器，用于偏移实现循环 -->
  <div class="image-wrapper">
    <img src="你的图片地址" alt="循环滚动图" class="scroll-img">
    <img src="你的图片地址" alt="循环滚动图" class="scroll-img">
  </div>
</div>

CSS 样式

/* 重置默认样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 滚动容器占满视口高度，溢出隐藏 */
.scroll-container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

/* 图片包裹容器，高度由两张图片叠加决定 */
.image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

/* 图片自适应容器宽度，保持比例 */
.scroll-img {
  width: 100%;
  display: block;
  object-fit: cover;
}

JavaScript 逻辑

const scrollContainer = document.querySelector('.scroll-container');
const imageWrapper = document.querySelector('.image-wrapper');
const scrollImg = document.querySelector('.scroll-img');

// 获取单张图片的实际高度
let imgHeight = scrollImg.offsetHeight;

// 窗口大小变化时重新计算图片高度
window.addEventListener('resize', () => {
  imgHeight = scrollImg.offsetHeight;
});

// 监听页面滚动事件
window.addEventListener('scroll', () => {
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  // 计算循环偏移量：滚动距离取模图片高度
  const offset = scrollTop % imgHeight;
  // 反向偏移容器，模拟图片向下滚动的视觉效果
  imageWrapper.style.transform = `translateY(-${offset}px)`;
});

原理说明 #

1. 两张相同图片垂直拼接，当第一张完全滚出可视区域顶部时，第二张刚好衔接，视觉无断层。
2. 通过scrollTop % imgHeight计算偏移量，滚动距离等于单张图片高度时偏移重置为0，实现无限循环。
3. 监听窗口resize事件，确保图片高度变化时仍能正确计算偏移。

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