解决Marquee组件白间隙问题：滚动内容衔接异常求助

嘿，这个问题我之前做滚动公告栏的时候也踩过坑！原生的<marquee>标签本身就有这种不友好的滚动体验，更别说自定义组件如果没处理无缝逻辑的话，肯定会出现你说的“等全部内容滚完才重新显示”的情况。下面给你两种实用的解决思路：

方案一：用CSS动画实现无缝滚动 #

这种方法最简洁，不需要太多JS逻辑，核心是复制一份文本，让两个文本连续滚动，视觉上就形成无缝衔接的效果了。

代码示例： #

<div class="marquee-container">
  <div class="marquee-content">
    <span>Breaking news Breaking news Breaking news Breaking news Breaking news Breaking news Breaking news</span>
    <!-- 复制一份内容，实现无缝衔接 -->
    <span>Breaking news Breaking news Breaking news Breaking news Breaking news Breaking news Breaking news</span>
  </div>
</div>

对应的CSS样式：

.marquee-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  border: 1px solid #ccc; /* 可选：加个边框方便看效果 */
}

.marquee-content {
  display: inline-block;
  /* 自定义滚动速度，15s是总时长，linear保持匀速，infinite循环 */
  animation: marquee 15s linear infinite;
}

/* 给两份内容之间加个间距，避免连在一起太生硬 */
.marquee-content span:nth-child(2) {
  margin-left: 20px;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* 滚动到一半就重置，因为有两份相同内容 */
}

原理很简单：两份相同的文本并排显示，动画让整个容器向左滚动自身宽度的50%就重置位置，这样第一份文本刚滚完，第二份刚好接上，视觉上完全看不出断层。

方案二：JavaScript控制自定义Marquee组件 #

如果你的Marquee是用框架（比如React/Vue）写的自定义组件，可以通过监听滚动位置，动态克隆文本并调整偏移量来实现无缝滚动。

React示例代码片段： #

import { useEffect, useRef } from 'react';

const SeamlessMarquee = ({ text }) => {
  const containerRef = useRef(null);
  const contentRef = useRef(null);

  useEffect(() => {
    const container = containerRef.current;
    const content = contentRef.current;
    if (!container || !content) return;

    // 克隆一份文本内容，放在原内容后面
    const cloneContent = content.cloneNode(true);
    content.appendChild(cloneContent);

    let animationId;
    let scrollPosition = 0;

    const animateScroll = () => {
      scrollPosition -= 1; // 控制滚动速度，数值越大滚得越快
      // 当原文本完全滚出容器时，重置位置
      if (scrollPosition <= -content.offsetWidth / 2) {
        scrollPosition = 0;
      }
      content.style.transform = `translateX(${scrollPosition}px)`;
      animationId = requestAnimationFrame(animateScroll);
    };

    animateScroll();
    // 组件卸载时清除动画
    return () => cancelAnimationFrame(animationId);
  }, [text]);

  return (
    <div 
      ref={containerRef} 
      style={{ 
        overflow: 'hidden', 
        whiteSpace: 'nowrap', 
        width: '100%',
        border: '1px solid #ccc'
      }}
    >
      <div ref={contentRef} style={{ display: 'inline-block' }}>
        <span>{text}</span>
      </div>
    </div>
  );
};

export default SeamlessMarquee;

为啥原生<marquee>会有这个问题？ #

其实原生<marquee>标签已经被W3C标记为废弃状态了，它的滚动逻辑就是“一次性把整个文本滚出容器，然后再从起点重新开始”，根本没做无缝衔接的处理。而且现在浏览器对它的支持越来越差，所以真心不推荐再使用原生的marquee标签啦。

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