Question

我的文字包含在跨度中，我在歌曲播放时突出显示文字作为歌词（按秒计时）。

我的问题是有没有办法检测突出显示的文本何时将运行容器的底部（父溢出包装器）所以我将文本移动到下一行，或者可能通过几行显示下一个输入突出显示的行。如有必要，我可以给所有跨度不同的ID。我可以在内包装div上使用scrollTop，但是如何计算突出显示的单词的位置？

例如，当这个带有红色的单词出现时：

#wrap{
  width:300px;
  height:100px;
  background:#ccc;
  overflow-y:auto;
}

.red{
  color:red;
}

<div id="wrap">
<div id="inner-wrap">
<span>Lorem</span> <span>ipsum</span> <span>dolor</span> <span>sit</span> <span>amet.</span> <span>Lorem</span> <span>ipsum</span> <span>dolor</span> <span>sit</span> <span>amet.</span> <span>Lorem</span> <span>ipsum</span> <span>dolor</span> <span>sit</span> <span>amet.</span> <span>Lorem</span> <span>ipsum</span> <span>dolor</span> <span>sit</span> <span>amet.</span> <span>Lorem</span> <span>ipsum</span> <span>dolor</span> <span>sit</span> <span>amet.</span> <span>Lorem</span> <span>ipsum</span> <span>dolor</span> <span>sit</span> <span>amet.</span> <span>Lorem</span> <span>ipsum</span> <span>dolor</span> <span>sit</span> <span>amet.</span> <span class="red">Lorem</span> <span class="red">ipsum</span> <span class="red">dolor</span> <span>sit</span> <span>amet.</span> <span>Lorem</span> <span>ipsum</span> <span>dolor</span> <span>sit</span> <span>amet.</span> <span>Lorem</span> <span>ipsum</span> <span>dolor</span> <span>sit</span> <span>amet.</span> <span>Lorem</span> <span>ipsum</span> <span>dolor</span> <span>sit</span> <span>amet.</span> <span>Lorem</span> <span>ipsum</span> <span>dolor</span> <span>sit</span> <span>amet.</span> <span>Lorem</span> <span>ipsum</span> <span>dolor</span> <span>sit</span> <span>amet.</span>
</div>
</div>

Answer 1

这是一个例子。包装器中<span>的位置使用其offsetTop确定。然后使用其scrollTop属性将包装器滚动到该位置。

// Example data, <span>ified
var wrap = document.querySelector("#wrap");
wrap.innerHTML = "Lorem ipsum dolor sit amet. "
  .repeat(30).split(" ")
  .map(w => `<span>${w}</span>`).join(" ");
var spans = document.querySelectorAll("#wrap span");
var selected = null;

// Scroll to span function, also highlights the span
function scrollTo(span) {
  // Highlighting
  if (selected) {
    selected.className = "";
  }
  span.className = "red";
  selected = span;

  // Actual scrolling (span is centered in the wrapper)
  wrap.scrollTop = span.offsetTop - 35;
}

// Button listener
document.querySelector("#button").onclick = function() {
  scrollTo(spans[Math.floor(Math.random() * spans.length)]);
};

#wrap {
  height: 70px;
  overflow-y: scroll;
}

.red {
  color: red;
}

<div id="wrap"></div>
<button id="button">Select random span</button>

javascript将文本垂直滚动到下一行

1 个答案: