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

我将单词包装在跨距中，并在歌曲播放时突出显示文字作为歌词（按秒计时）

我的问题是，是否有一种方法可以检测高亮显示的文本何时会从容器底部（父溢出包装器）运行，因此我将文本移动到下一行，或者可能移动几行以显示下一个传入的高亮显示行。如果需要，我可以给所有跨度提供不同的ID。我可以在内部wrap div上使用scrollTop，但如何计算突出显示的单词的位置呢

例如，当红色类的单词熄灭时：

#换行{
宽度：300px；
高度：100px；
背景：#ccc；
溢出y：自动；
}
瑞德先生{
颜色：红色；
}

Lorem ipsum dolor sit amet。Lorem ipsum dolor sit amet。Lorem ipsum dolor sit amet。Lorem ipsum dolor sit amet。Lorem ipsum dolor sit amet。Lorem ipsum dolor sit amet。Lorem ipsum dolor sit amet。Lorem ipsum dolor sit amet。Lorem ipsum dolor sit amet。Lorem ipsum dolor sit amet。Lorem ipsum dolor sit amet。Lorem ipsum dolor sit amet。Lorem ipsum dolor sit amet。

以下是一个示例。包装器中

的位置是使用其

偏移量来确定的。然后使用其
scrollTop
属性将包装器滚动到该位置


//示例数据，请参见
var wrap=document.querySelector（“wrap”）；
wrap.innerHTML=“Lorem ipsum dolor sit amet。”
.重复（30）。拆分（“”）
.map（w=>`${w}`）。join（“”）；
var span=document.queryselectoral（“#wrap span”）；
选择的var=null；
//滚动至span功能，同时高亮显示span
函数滚动到（span）{
//突出显示
如果（选定）{
selected.className=“”；
}
span.className=“红色”；
所选=跨度；
//实际滚动（范围在包装器中居中）
wrap.scrollTop=span.offsetTop-35；
}
//按钮侦听器
document.querySelector（“#按钮”）.onclick=function（）{
滚动到（span[Math.floor（Math.random（）*span.length）]；
};
#换行{
高度：70像素；
溢出y：滚动；
}
瑞德先生{
颜色：红色；
}

选择random span
为什么会出现错误：未捕获类型错误：wrap.scroll不是一个函数？@Toniq不确定，现在再试一次？我仍然会出现错误，不是吗？{“message”：“Uncaught TypeError:wrap.scroll不是函数”，“filename”：“，“lineno”：39，“colno”：8}@Toniq好的，我把它改成了
scrollTop
。我认为
scroll
得到了很好的支持，但可能没有。