使用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，而不是文本区域，因为 div 会自动调整大小。只要确保风格匹配即可。

2. 要隐藏您的幻像 div，请使用：

   visibility: hidden;
position: absolute;

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

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

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