使用javascript将文本区域滚动到特定区域

Question

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

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

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

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

Answer 1

您的解决方案是一个很好的解决方案，但让我建议一些事情以使其更容易。

1. 使用幻像 div，而不是文本区域，因为 div 会自动调整大小。只需确保样式匹配即可。

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

   可见性：隐藏；
位置：绝对；

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

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

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