滚动文字组件最后一个单词无法显示及停留的问题求助

核心问题 #

1. CSS选择器无效：你写的.lastWord span选择器找不到目标元素——lastWord本身是<span>标签，内部嵌套的是<h2>而非<span>，导致该样式完全不生效，你想要的居中定位也没起作用。
2. 继承样式冲突：lastWord继承了.scrollWord的left:5%属性，导致它的位置不是预期的居中状态，视觉上可能被遮挡或偏离显示区域。

修复步骤 #

1. 修正CSS代码

删除无效的.lastWord span选择器，替换为直接针对.lastWord的样式，覆盖继承的定位属性；同时清理冗余的重复样式：

/* 合并统一的字体样式，避免重复定义 */
#harderWord, .scrollWord {
  font-family: Montserrat, sans-serif;
  font-size: 24px;
  line-height: 2.5;
}

/* 修正lastWord的样式，实现居中并确保过渡生效 */
.lastWord {
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

另外注意：原CSS中overflow: show不是标准属性，改为overflow: visible更规范。

2. 确认JS逻辑

你的JS部分设置lastWord.style.opacity = 1的逻辑是正确的，修正CSS后，到51秒时（50000ms+1000ms），最后一个单词会正常淡入并居中显示。

完整修复后的代码示例 #

<div id="scrollTextContainer">
  <span id="harderWord"><h2>Harder</h2></span>
  <span class="scrollWord"><h2>Play</h2></span>
  <span class="scrollWord"><h2>Think</h2></span>
  <span class="scrollWord"><h2>Learn</h2></span>
  <span class="scrollWord"><h2>Train</h2></span>
  <span class="scrollWord"><h2>Fight</h2></span>
  <span class="scrollWord"><h2>Recover</h2></span>
  <span class="scrollWord lastWord"><h2>Play</h2></span>
</div>

<style>
#scrollTextContainer {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  line-height: 2.5;
  color: black;
  width: 100%;
  height: 75px;
  overflow: visible;
}

#harderWord {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.scrollWord {
  opacity: 0;
  transition: opacity 1s ease-in-out;
  position: absolute;
  left: 5%;
  top: 0;
}

#harderWord, .scrollWord {
  font-family: Montserrat, sans-serif;
  font-size: 24px;
  line-height: 2.5;
}

.lastWord {
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>
window.onload = function() {
  var container = document.getElementById("scrollTextContainer");
  var harderWord = document.getElementById("harderWord");
  var scrollWords = document.getElementsByClassName("scrollWord");
  var lastWord = document.getElementsByClassName("lastWord")[0];

  setTimeout(function() {
    harderWord.style.opacity = 1;
  }, 10000);

  setTimeout(function() {
    scrollWords[0].style.opacity = 1;
  }, 16000);

  setTimeout(function() {
    scrollWords[0].style.opacity = 0;
    setTimeout(function() {
      scrollWords[1].style.opacity = 1;
    }, 1000);
  }, 24000);

  setTimeout(function() {
    scrollWords[1].style.opacity = 0;
    setTimeout(function() {
      scrollWords[2].style.opacity = 1;
    }, 1000);
  }, 30000);

  setTimeout(function() {
    scrollWords[2].style.opacity = 0;
    setTimeout(function() {
      scrollWords[3].style.opacity = 1;
    }, 1000);
  }, 36000);

  setTimeout(function() {
    scrollWords[3].style.opacity = 0;
    setTimeout(function() {
      scrollWords[4].style.opacity = 1;
    }, 1000);
  }, 41000);

  setTimeout(function() {
    scrollWords[4].style.opacity = 0;
    setTimeout(function() {
      scrollWords[5].style.opacity = 1;
    }, 1000);
  }, 46000);

  setTimeout(function() {
    scrollWords[5].style.opacity = 0;
    setTimeout(function() {
      lastWord.style.opacity = 1;
    }, 1000);
  }, 50000);
};
</script>

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