Javascript 如何了解内容可编辑div'；滚动的y坐标是多少？

我正在尝试使用html的contenteditable

div

制作一个在线代码编辑器

用户将在

div

中编辑他们的代码，该div支持最大值

19

，而无需滚动

div

我想做的是为每一行做一个行号

但是您可以看到，当用户编辑溢出

div

并使

div

滚动的代码时，行号不会改变。为了解决这个问题，我想知道

div

滚动的y坐标。例如，如果只有3行，因此

div

不滚动，则代码返回

0

，如果有100行且插入符号当前位于第100行，这使得

div

滚动，则代码返回100-19=

81

代码如下：

var textbox=document.getElementById（“textbox”）；
var row_text=document.getElementById（“row text”）；
函数更新（）{
//行号文本。例如，如果顶行号应为1，则应返回'1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n11\n12\n13\n14\n15\n16\n17\n18\n19`
行\ text.innerHTML=“1\n2\n3”；
}
设置间隔（更新，1）
正文{
背景色：#24292E；
}
#文本框容器{
边框：0.5px白色固体；
宽度：500px；
高度：300px；
左：50%；
位置：相对位置；
转换：转换（-248px，2px）；
}
#文本框{
宽度：480px；
身高：292px；
调整大小：无；
左：50%；
位置：相对位置；
转换：转换（-233px，2px）；
溢出：隐藏；
背景色：#24292E；
颜色：白色；
字体系列：“源代码Pro”，monospace；
大纲：无；
字体大小：12px；
溢出：隐藏；
}
p{
宽度：0px；
高度：0px；
边际：0px；
转换：翻译（3px，2px）；
字体系列：“源代码Pro”，monospace；
字体大小：12px；
颜色：白色；
}

试验


const textbox=document.getElementById（'textbox'）；
const logger=document.getElementById（'logger'）；
const bottomLogger=document.getElementById（'bottomLogger'）；
设置间隔（（）=>{
logger.value=textbox.scrollTop+'px'；//从上方缩进
loggerRow.value=textbox.scrollTop/15；//行号
bottomLogger.value=textbox.scrollHeight/15；
}，40）
#文本框{
背景：水；
高度：150像素；
宽度：300px；
最大高度：150像素；
溢出y：滚动；
字体大小：13px；
线高：15px；
}





行数


最下面一行