本文介绍一种轻量、兼容性好且无需第三方插件的纯 javascript + css 方案，用于检测文本是否超出指定 div 高度，并在满足条件时自动触发平滑垂直循环滚动（marquee 效果），特别适用于实时交通信息屏等嵌入式显示场景。
本文介绍一种轻量、兼容性好且无需第三方插件的纯 javascript + css 方案，用于检测文本是否超出指定 div 高度，并在满足条件时自动触发平滑垂直循环滚动（marquee 效果），特别适用于实时交通信息屏等嵌入式显示场景。
在铁路信息屏、公交到站板等嵌入式 Web 应用中，常需动态展示长文本（如“经停站列表”或“延误说明”），而受限于固定高度容器（如 .rvias），内容易被截断。此时仅靠 overflow: hidden 不够——用户无法获取完整信息。理想的解决方案是：仅当文本实际高度超过容器时，才启用垂直自动滚动；否则保持静态显示，兼顾可读性与性能。
以下是一个现代、可靠且可复用的实现方案，完全基于原生 JS 与 CSS，不依赖 jQuery 或老旧插件（如已弃用的 jquery-scroller）：
✅ 核心思路
- 使用
element.scrollHeight > element.clientHeight精确判断内容是否溢出； - 对溢出元素动态添加
.marquee-vertical类，启用 CSS 动画滚动； - 利用
@keyframes实现无缝循环，避免跳变； - 支持多实例（如多个
.rvias元素独立滚动）； - 自动适配字体缩放（
vh/em单位）、响应式布局。
? 完整代码示例
HTML 结构（精简版）：
<div class="depContainer">
<div>
<div class="deps rdest">London St Pancras</div>
<div class="deps rvias" data-marquee="true">
Via Leicester, Nottingham, Derby, Stoke-on-Trent, Crewe
</div>
</div>
<div>
<div class="deps rdest">Manchester Piccadilly</div>
<div class="deps rvias" data-marquee="true">
Via Sheffield, Leeds, Bradford, Manchester Victoria
</div>
</div>
</div>CSS（关键样式）：
.rvias {
position: relative;
overflow: hidden;
line-height: 1.4;
font-size: 1.6vh;
max-height: 3.2em; /* ≈ 2 lines → 触发滚动阈值 */
white-space: normal;
}
/* 垂直滚动专用类（由 JS 动态添加） */
.rvias.marquee-vertical {
height: 3.2em; /* 锁定可视高度 */
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.rvias.marquee-vertical > span {
display: block;
animation: marqueeVertical 20s linear infinite;
}
@keyframes marqueeVertical {
0% { transform: translateY(0); }
100% { transform: translateY(-100%); }
}JavaScript（自动检测 + 启用滚动）：
function initVerticalMarquee(selector = '[data-marquee="true"]') {
const elements = document.querySelectorAll(selector);
elements.forEach(el => {
// 检查是否溢出（注意：需确保元素已渲染且样式生效）
const isOverflowing = el.scrollHeight > el.clientHeight;
if (isOverflowing && !el.classList.contains('marquee-vertical')) {
// 包裹内容，便于动画控制
const content = el.textContent.trim();
el.innerHTML = `<span>${content}</span>`;
el.classList.add('marquee-vertical');
// 可选：重置动画以避免初始延迟
el.style.animation = 'none';
setTimeout(() => el.style.animation = '', 10);
}
});
}
// 页面加载完成后执行（确保 DOM 和样式就绪）
document.addEventListener('DOMContentLoaded', () => {
initVerticalMarquee();
});
// 若内容动态更新（如 AJAX 刷新），可再次调用：
// initVerticalMarquee();⚠ 注意事项与优化建议
-
性能优先：避免高频
scrollHeight查询。本方案仅在初始化时检测一次，如内容会动态变更，建议配合MutationObserver监听文本变化后重检。 -
无障碍友好：滚动区域建议添加
aria-live="polite"并提供暂停按钮（通过animation-play-state: paused控制），符合 WCAG 2.1 要求。 -
字体渲染兼容性：
vh单位在部分 iOS 版本中可能异常，生产环境建议搭配clamp()或媒体查询降级。 -
替代方案对比：相比
jquery-scroller，本方案体积更小（
该方案已在真实交通信息屏项目中稳定运行，兼顾视觉流畅性与系统资源占用，是垂直文本自动滚动的推荐实践。
