如何实现响应式垂直跑马灯（Marquee）并避免文本重叠
本文介绍一种基于 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(fun
ction() {
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));
});
});
ction() {
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）与滚动逻辑所需的内容高度，兼顾设计灵活性与运行稳定性，适用于新闻轮播、实时数据流、广告横幅等多种垂直滚动场景。
