如何实现文本内容在溢出容器时自动垂直滚动-html教程-PHP中文网

如何实现文本内容在溢出容器时自动垂直滚动

本文介绍一种轻量、兼容性好且无需第三方插件的纯 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，本方案体积更小（

该方案已在真实交通信息屏项目中稳定运行，兼顾视觉流畅性与系统资源占用，是垂直文本自动滚动的推荐实践。