javascript滾動文本垂直到下一行

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>