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

使用javascript将文本区域滚动到特定区域,javascript,jquery,scroll,textarea,Javascript,Jquery,Scroll,Textarea,我有一个带滚动条的文本区。我需要使用javascript更改光标在文本区域中的位置,并滚动文本区域,使光标可见。我使用elem.selectionStart和elem.selectionEnd移动光标,但当我将光标移动到不可见的点时,文本区域不会滚动,使光标可见 更多详细信息(可能是TL;DR) 我正在创建一个幻灯片编辑器,并在内容编辑器(带滚动条的文本区域)旁边预览完整的幻灯片。当您在文本区域中移动光标时,幻灯片将更改幻灯片,以便您始终查看正在编辑的幻灯片。我需要得到它,以便更改幻灯片(使用按

我有一个带滚动条的文本区。我需要使用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];
//SlideBuddries有编号,这些编号是幻灯片开始/结束的索引
//例如:[0,81,140,250]用于3张幻灯片的幻灯片放映
如果(doc.editor.selectionEnd>SlideBuddries[curSlide]&&
doc.editor.selectionEnd
我可以只计算文件中的换行数,以便知道向下滚动多远,但有许多行很长,占用了多行。我使用的是单间距字体,因此可以计算换行和占用多行的行数,但我希望有一种更简单的方法。我是否可以调用一个函数来模拟当用户移动光标时发生的情况,因为当用户单击文本区域时,文本区域总是滚动到该点

编辑: 由于大众的需求,这里有一把小提琴:


我将使用的解决此问题的方法是创建一个具有相同宽度但自动调整为高度的幻影文本区域。它必须是可见的,否则它将无法工作,所以使其处于abs位置,并将其移出屏幕。然后将文本置于所需光标位置之前。然后将真实文本区域滚动到幻影文本区域的高度。

您的解决方案很好,但让我提出一些建议,使其更简单

  • 使用幻影div,而不是文本区域,因为div将自动调整大小。只需确保与样式匹配即可

  • 要隐藏幻影div,请使用:

    可见性:隐藏
    位置:绝对位置

    这与显示的效果相同:无,同时允许div具有高度

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

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

    你能把一个完整的链接放在编辑下的主帖子中吗