如何实现指定HTML中h2文本溢出时的Marquee滚动效果？

嗨，我来帮你搞定这个需求！原生的<marquee>标签已经被W3C废弃了，所以咱们用更现代靠谱的CSS动画+JS检测方案，既能满足「只有溢出时才滚动」的要求，还能灵活控制滚动效果。

步骤1：调整HTML结构 #

先给H2标签套一个容器，方便我们控制溢出范围：

<div class="grid_1_of_4 images_1_of_4">
  <a href="preview.html"><img src="images/Advertise2.png" alt="" /></a>
  <!-- 新增容器包裹H2 -->
  <div class="scroll-text-container">
    <h2 class="scroll-text">This is a Long text that will trigger scroll when it overflows</h2>
  </div>
  <div class="price-details">
    <div class="price-number">
      <p><span class="rupees">Price</span></p>
    </div>
    <div class="clear"></div>
  </div>
</div>

步骤2：添加CSS样式 #

设置基础布局和滚动动画，确保文本不换行、溢出隐藏，同时定义滚动的动画逻辑：

/* 容器样式：限制宽度，溢出隐藏 */
.scroll-text-container {
  width: 100%; /* 可根据你的grid布局设置固定宽度，比如250px */
  overflow: hidden;
  position: relative;
}

/* H2文本样式：强制不换行，inline-block方便检测宽度 */
.scroll-text {
  white-space: nowrap;
  margin: 0;
  padding: 0;
  display: inline-block;
}

/* 定义滚动动画：从左到右平移整个文本 */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* 激活滚动的类：只有溢出时才添加 */
.scroll-active {
  animation: scroll 10s linear infinite; /* 10s是滚动时长，可自行调整 */
}

步骤3：用JS检测溢出并触发滚动 #

通过JS判断文本宽度是否超过容器宽度，动态添加滚动类；同时监听窗口resize事件，保证窗口大小变化时也能正确判断：

// 获取所有需要处理的滚动文本元素
const scrollTexts = document.querySelectorAll('.scroll-text');

// 初始化检测
checkOverflow();

// 窗口大小改变时重新检测
window.addEventListener('resize', checkOverflow);

function checkOverflow() {
  scrollTexts.forEach(text => {
    const container = text.parentElement;
    // 对比文本宽度和容器宽度
    if (text.offsetWidth > container.offsetWidth) {
      text.classList.add('scroll-active');
    } else {
      text.classList.remove('scroll-active');
    }
  });
}

额外说明 #

• 你可以修改@keyframes里的动画逻辑，比如改成从右往左滚动（把translateX(-100%)换成translateX(100%)，初始值设为-100%），或者调整动画时长、循环次数。
• 如果你的grid布局有固定宽度，记得把.scroll-text-container的width设置成和网格元素匹配的数值，这样检测更准确。

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