当前位置：首页 > 行业动态 > 正文

html文字滚动

admin
行业动态
2025-05-02
3182

HTML文字滚动可通过` 标签实现，但该标签已废弃，推荐使用CSS动画或JavaScript控制，如overflow:hidden 配合animation 属性，或通过JS定时修改position`实现平滑

HTML文字滚动实现方法详解

水平滚动文字

水平滚动是最常见的文字滚动形式,常用于新闻公告、广告条等场景。

CSS动画实现

<div class="scroll-container">
  <div class="scroll-text">这里是滚动的文字内容</div>
</div>
<style>
.scroll-container {
  width: 300px;
  overflow: hidden;
  white-space: nowrap;
  border: 1px solid #ccc;
}
.scroll-text {
  animation: scroll 5s linear infinite;
}
@keyframes scroll {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
</style>

JavaScript定时器实现

html文字滚动第1张

const container = document.querySelector('.js-scroll-container');
let x = container.offsetWidth;
setInterval(() => {
  x -= 1;
  container.scrollLeft = x;
  if (x <= -container.scrollWidth) x = container.offsetWidth;
}, 30);

方法类型	优点	缺点
CSS动画	性能优、代码简洁	兼容性需前缀处理
JS定时器	精确控制、可交互	性能消耗较大

垂直滚动文字

适用于多行文本的垂直滚动场景,如日志输出、实时数据流等。

CSS实现示例

.vertical-scroll {
  height: 150px;
  overflow: hidden;
}
.scroll-content {
  animation: vertical-scroll 8s linear infinite;
}
@keyframes vertical-scroll {
  0% { transform: translateY(100%); }
  100% { transform: translateY(-100%); }
}

自动感应滚动超出容器时自动触发滚动，适用于动态内容场景。

实现思路

监听容器scroll事件高度是否超过视窗
自动添加滚动动画类名

const autoScrollContainer = document.querySelector('.auto-scroll');
if (autoScrollContainer.scrollHeight > autoScrollContainer.clientHeight) {
  autoScrollContainer.classList.add('active-scroll');
}

滚动控制增强

通过按钮控制滚动状态（开始/暂停/重置）

控制按钮示例

<button id="control-btn">暂停</button>
<script>
let isPaused = false;
document.getElementById('control-btn').addEventListener('click', () => {
  const container = document.querySelector('.scroll-container');
  if (isPaused) {
    container.style.animationPlayState = 'running';
    isPaused = false;
  } else {
    container.style.animationPlayState = 'paused';
    isPaused = true;
  }
});
</script>

控制类型	CSS属性	JS属性
暂停/恢复	`animation-play-state`	`animationPlayState`
调整速度	`animation-duration`	修改定时器间隔
重置位置	`transform`复位	`scrollTop=0`