如何实现响应式垂直跑马灯（80vh 高度）并避免文本重叠

根本原因在于：
$(‘.js-cycle-list’).height() 在 css 中设为 80vh 时，返回的是容器自身高度，而非所有

✅ 解决方案：用 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 的响应式设计需求。