使用javascript将textarea滚动到特定区域答案

【问题标题】：Scrolling textarea to specific area with javascript使用javascript将textarea滚动到特定区域
【发布时间】：2011-08-04 18:36:36
【问题描述】：

我有一个带有滚动条的文本区域。我需要使用 javascript 更改光标在 textarea 中的位置，并且 滚动 textarea 以便您的光标可见。 我正在使用 elem.selectionStart 和 elem.selectionEnd 来移动光标，但是当我移动时它到一个不可见的点，文本区域不会滚动，所以光标是可见的。

更多细节（可能是 TL;DR）我正在创建一个幻灯片编辑器，并在内容的编辑器（带有滚动条的文本区域）旁边预览完整的幻灯片。当您在文本区域中移动光标时，幻灯片会更改幻灯片，因此您始终可以查看正在编辑的幻灯片。我需要得到它，以便更改幻灯片（使用按钮）移动您的光标，以便您可以看到生成该幻灯片的代码。

// 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];

我可以只计算文件中换行符的数量，这样我就知道向下滚动多远，但是有很多行很长并且占用了多行。我正在使用等宽字体，因此计算换行符和占用多行的行数，但我想要一种更简单的方法。有没有我可以调用的函数来模拟当用户移动光标时会发生什么，因为当用户点击时文本区域总是滚动到那个点...

编辑：由于大众需求，这里有一个小提琴：http://jsfiddle.net/tShQ2/

我将用来解决此问题的方法是创建一个具有相同宽度但自动调整高度的幻像文本区域。它必须是可见的，否则它将不起作用，因此将其设为绝对位置并将其移出屏幕。然后将文本放在所需光标位置之前。然后将真实文本区域滚动到虚拟文本区域的高度。

【问题讨论】：

你能把fiddle放在一起吗？
小提琴完成，在主帖中的链接编辑：

标签： javascript jquery scroll textarea

【解决方案1】：

您的解决方案很好，但让我提出一些建议以使其更容易。

使用幻像 div，而不是 textarea，因为 div 会自动调整大小。只需确保匹配样式即可。
要隐藏您的幻像 div，请使用：

visibility: hidden;
position: absolute;

这与display: none的效果相同，同时允许div有一个高度。

还有一件事。对于 IE，您可以从选择中创建一个范围并显式滚动到它：

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

【讨论】：