本文详解如何在父容器高度为 `80vh` 的响应式场景下，构建一个平滑、无重叠、无限循环的垂直滚动 marquee，核心是动态计算列表总高度并修正动画重置逻辑，确保滚动顺序始终正确。
在实现垂直滚动跑马灯（vertical marquee）时，若父容器（如 .cycle__list）采用固定高度（如 500px），传统基于 top 像素偏移的 jQuery 动画通常能稳定运行。但一旦切换为响应式单位（如 80vh），问题便随之而来：当列表项（<li>）总高度远超可视区域（例如 30 条 × 100px = 3000px），而容器却被强制截断为 80vh ≈ 720px，动画重置逻辑 top = $('.js-cycle-list').height() 就会失效——它返回的是 720px，而非实际内容总高，导致新条目“提前入场”，与尚未移出视口的旧条目重叠，破坏滚动连贯性。
根本原因在于：
$('.js-cycle-list').height() 在 CSS 中设为 80vh 时，返回的是容器自身高度，而非所有 <li> 的累计高度。而动画重置需将元素瞬间“传送”到所有内容末尾之后的位置，才能实现无缝衔接。
✅ 解决方案：用 JavaScript 动态计算真实内容高度，并覆盖容器高度
以下为优化后的完整实现（含关键注释）：
$(document).ready(function() {
// 1. 计算所有 li 元素的总高度（注意：需确保 DOM 已渲染完成）
let totalLiHeight = 0;
$(".js-cycle-list > li").each(function() {
totalLiHeight += $(this).outerHeight(true); // 使用 outerHeight(true) 包含 margin
});
// 2. 动态设置 ul 容器高度为内容总高（关键！）
// 减去约 200px 是为预留首尾缓冲区，避免最后一项刚出现就立即重置
// 可根据实际 li 高度和动画步长微调（本例中每步 -100px，故预留 2×100px）
$('.js-cycle-list').css("height", totalLiHeight - 200);
// 3. 初始化各 li 的起始 top 值（保持原有逻辑）
let i = 0;
$(".js-cycle-list > li").each(function() {
$(this).css("top", i);
i += 100;
window.verticalScroller($(this));
});
});
// 4. 改进的滚动递归函数
window.verticalScroller = function($elem) {
const currentTop = parseInt($elem.css("top"));
const singleItemHeight = $('.js-cycle-list > li').first().outerHeight(true);
const resetPosition = $('.js-cycle-list').height(); // 此时 height 已为动态计算值！
// 当元素上边缘移出可视区底部（即 top < -singleItemHeight），重置到最底部
if (currentTop < -singleItemHeight) {
$elem.css("top", resetPosition);
}
// 每次动画向下移动 100px，耗时 600ms，线性缓动
$elem.animate({
top: currentTop - 100
}, 600, 'linear', function() {
window.verticalScroller($(this));
});
};? 配套 CSS 调整要点：
- 移除 .cycle-text 的 height: 80vh，改用 display: table + width: 100% 保证弹性布局；
- 保留 .cycle__list 的 height: 80vh 仅作视觉容器约束（配合 overflow: hidden），但 JS 会动态覆盖其 height 属性以支撑动画逻辑；
- 确保 li 使用 position: absolute 且 height 固定（或通过 outerHeight(true) 统一获取），便于精确计算。
⚠️ 注意事项：
- 若 li 内容动态加载或字体加载延迟，需在 $(document).ready() 后增加 $(window).on('load', ...) 或使用 MutationObserver 确保高度计算准确；
- 响应式场景下，建议监听 resize 事件，在窗口尺寸显著变化时重新执行高度计算与初始化（可加防抖）；
- 现代项目推荐使用 CSS @keyframes + animation 替代 jQuery animate() 以提升性能，但需配合 will-change: transform 和 transform: translateY() 实现更流畅的硬件加速滚动。
通过将容器高度从静态 80vh 切换为动态内容总高，我们让动画重置点真正落在“内容流末端”，彻底解决了因高度失配导致的文本重叠与顺序错乱问题，同时完全兼容 80vh 的响应式设计需求。
