使用javascript將textarea滾動到特定區域

Question

我有一個帶滾動條的textarea。 我需要使用javascript更改光標在textarea中的位置並滾動textarea以使光標可見。 我正在使用elem.selectionStart和elem.selectionEnd移動光標，但當我將其移動到一個不可見的點時，textarea不會滾動，因此光標可見。

更多細節（可能是TL; DR）我正在創建一個幻燈片編輯器，並在內容的編輯器（帶滾動條的textarea）旁邊預覽完整的幻燈片。 當您將光標移動到textarea時，幻燈片會更改幻燈片，因此您始終可以查看正在編輯的幻燈片。 我需要得到它，所以更改幻燈片（使用按鈕）移動光標，以便您可以看到生成該幻燈片的代碼。

// slideBoundries has numbers which are the indexes where the slides begin/end
// eg: [0, 81, 140, 250] for slideshow with 3 slides

if (doc.editor.selectionEnd > slideBoundries[curSlide] &&
    doc.editor.selectionEnd < slideBoundries[curSlide + 1]) {
    return;
}
doc.editor.selectionStart = slideBoundries[curSlide];
doc.editor.selectionEnd = slideBoundries[curSlide];

我可以只計算文件中的換行數，這樣我就知道向下滾動多遠，但是有很多行很長並占用多行。 我使用等寬字體，因此計算占用多行的換行符和行數，但我想要一種更簡單的方法。 是否有一個函數我可以調用來模仿當用戶移動光標時發生的事情，因為當用戶點擊時textarea總是滾動到那個點...

編輯：由於受歡迎的需求，這里是一個小提琴： http ： //jsfiddle.net/tShQ2/

我將用來解決這個問題的方法是創建一個具有相同寬度的幻像文本區域，但是自動調整到高度。 它必須是可見的，否則它將無法工作，所以將它設置為abs位置並將其移出屏幕。 然后將文本放在所需的光標位置之前。 然后將真正的textarea滾動到幻像文本區域的高度。

Answer 1

你的解決方案是一個很好的解決方案，但是讓我提出一些建議，讓它變得更容易。

1. 使用幻像div而不是textarea，因為div會自動自動調整大小。 只需確保匹配樣式。

2. 隱藏你的幻影div使用：

   visibility: hidden;
position: absolute;

   這與display: none具有相同的效果，同時允許div具有高度。

還有一件事。 對於IE，您可以從選擇中創建范圍並顯式滾動到它：

document.selection.createRange().scrollIntoView();