是否可以通过JavaScript模拟实现<marquee>标签的效果？

纯CSS实现（无额外依赖，兼容性优） #

无需JS即可实现基础滚动效果，适配所有现代浏览器：

<!-- HTML结构 -->
<div class="marquee-wrap">
  <div class="marquee-text">你要滚动的内容放在这里</div>
</div>

/* 容器样式 */
.marquee-wrap {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
/* 滚动内容样式 */
.marquee-text {
  display: inline-block;
  /* 10s为滚动一周的时长，数值越小速度越快 */
  animation: marquee 10s linear infinite;
}
/* 滚动动画定义 */
@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

可调整的自定义配置：

• 要实现从左向右滚动：互换@keyframes里0%和100%的translateX数值即可
• 要实现垂直滚动：将translateX替换为translateY，同时给.marquee-wrap设置固定高度
• 要实现来回反弹滚动：将动画属性里的infinite改为alternate，同时调整动画起始位移数值

JS实现（支持复杂交互） #

如果需要悬停暂停、动态调整速度、内容实时更新等需求，可以用JS实现：

<div class="marquee-wrap" id="marqueeWrap">
  <div class="marquee-text" id="marqueeText">鼠标悬停我就会暂停滚动哦</div>
</div>

.marquee-wrap {
  width: 100%;
  height: 30px;
  overflow: hidden;
  position: relative;
}
.marquee-text {
  position: absolute;
  white-space: nowrap;
  left: 0;
}

const wrap = document.getElementById('marqueeWrap')
const text = document.getElementById('marqueeText')
let speed = 1 // 滚动速度，数值越大滚动越快
let pos = wrap.offsetWidth

function runMarquee() {
  pos -= speed
  // 内容完全滚出左侧后重置位置
  if (pos < -text.offsetWidth) pos = wrap.offsetWidth
  text.style.left = pos + 'px'
  requestAnimationFrame(runMarquee)
}

// 鼠标悬停暂停
wrap.addEventListener('mouseenter', () => speed = 0)
// 鼠标移出恢复滚动
wrap.addEventListener('mouseleave', () => speed = 1)

// 启动滚动
runMarquee()

内容的提问来源于stack exchange，提问作者Ariel Schnee