本文介绍一种基于 jquery 的响应式垂直循环滚动方案，通过动态计算列表总高度替代固定 `80vh`，确保在任意视口下都能平滑、无重叠地连续滚动。
在构建垂直方向的无限循环跑马灯（vertical marquee）时，若直接将容器高度设为 80vh，而列表项（
核心修复思路：
✅ 动态计算真实内容高度 —— 遍历所有
✅ 保留滚动节奏一致性 —— 继续使用像素级位移（如 -100px/帧），但重置逻辑 now jumps to the actual bottom；
✅ 保持响应式基础 —— 外层 .cycle-text 使用 display: table 兼容弹性布局，不破坏 vh 占位语义。
以下是优化后的完整实现：
window.verticalScroller = function($elem) { var top = parseInt($elem.css("top")); var itemHeight = $('.js-cycle-list > li').first().height(); // 取首项高度，更健壮 var resetTop = $('.js-cycle-list').height(); // ✅ 现在是真实内容总高 if (top < -itemHeight) { $elem.css("top", resetTop); // 重置到最底部（刚进入可视区上方） } $elem.animate({ top: top - 1 }, 10, 'linear', function() { window.verticalScroller($(this)); }); }; $(document).ready(function() { // ✅ 动态计算 ul 总高度：所有 li 高度之和 var totalHeight = 0; $(".js-cycle-list > li").each(function() { totalHeight += $(this).outerHeight(true); // 包含 border/margin 更准确 }); // 将 ul 高度设为内容总高（关键！） $('.js-cycle-list').css("height", totalHeight); // 初始化各 li 起始位置（等间距堆叠） var offset = 0; $(".js-cycle-list > li").each(function() { $(this).css("top", offset); offset += $(this).outerHeight(true); }); // 启动滚动 $(".js-cycle-list > li").each(function() { window.verticalScroller($(this)); }); });对应 css 建议微调（增强健壮性）：
.cycle-text { width: 100%; background: white; overflow: hidden; /* display: table; 已非必需，可移除以避免 table 布局副作用 */ } .cycle__list { position: relative; width: 100%; height: auto; /* ✅ 不再硬设 80vh，由 JS 控制 */ border: 1px solid red; overflow: hidden; margin: 0; padding: 0; list-style: none; } .cycle__list li { position: absolute; width: 100%; height: 100px; /* 若需响应式高度，可用 em/rem 或 JS 动态设置 */ border: 1px solid blue; overflow: hidden; } .cycle__list li p { color: #f40000; font-family: Arial, sans-serif; font-size: 80px; line-height: 100px; text-align: left; margin: 0; padding: 0; }注意事项：
- 使用 outerHeight(true) 替代 height() 可自动包含 border 和 margin，避免因样式差异导致高度计算偏差；
- 若
- 高度不统一，应在初始化阶段单独读取每项高度，并在 verticalScroller 中动态获取当前项高度（而非全局 $(‘.js-cycle-list > li’).first().height()）；
- 动画频率建议用 10ms 间隔 + 1px 步进，比原 600ms 大幅位移更平滑，也更易控制速度；
- 如需真正响应式（字体/行高随屏幕缩放），可结合 clamp() 或 vmin 单位，并在 resize 事件中重新计算高度与重置动画。
此方案彻底解耦了容器视觉高度（80vh）与滚动逻辑所需的内容高度，兼顾设计灵活性与运行稳定性，适用于新闻轮播、实时数据流、广告横幅等多种垂直滚动场景。