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

Question

我有一个带滚动条的文本区域。我需要使用 javascript 更改光标在文本区域中的位置并滚动文本区域以便您的光标可见。我正在使用 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];

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

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

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

Answer 1

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

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

2. 要隐藏你的 phantom div 使用:

   可见性:隐藏；
position:absolute；

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

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

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