Javascript 文本区域输入和高亮显示容器的同步滚动

我试图在不实际使用的情况下模仿的一些行为

我已经大致了解了突出显示的部分，但是，当输入文本超过textarea输入的可见区域时，突出显示将无法正确显示

问题是文本区域可以向下滚动，而突出显示容器似乎不可滚动。我试图链接textarea和下面突出显示的容器的滚动条，但不知何故它不起作用

$（'.linked'）。滚动（函数（）{
$（'.linked'）.scrollTop（$（this.scrollTop（））；
});
.hwt容器{
显示：内联块；
位置：相对位置；
溢出：隐藏；
-webkit文本大小调整：无；
}
.hwt背景{
位置：绝对位置；
排名：0；
右：-99px；
底部：0；
左：0；
右侧填充：99px；
溢出x：隐藏；
溢出y：自动；
}
.hwt亮点{
宽度：自动；
高度：自动；
边框颜色：透明；
空白：预包装；
单词包装：打断单词；
颜色：透明；
溢出：隐藏；
}
.hwt输入{
显示：块；
位置：相对位置；
保证金：0；
填充：0；
边界半径：0；
字体：继承；
溢出x：隐藏；
溢出y：自动；
}
.hwt内容{
边框：1px实心；
背景：不透明；
}
.hwt内容标记{
填充：0；
颜色：继承；
}
.linked{
溢出：自动！重要；
}

突出显示文本区域内的测试
这是测试字符串，未完全显示在textarea输入的可见区域中。
这是测试字符串，未完全显示在textarea输入的可见区域中。
由于您希望突出显示跟随滚动文本区域的内容，因此只需相应地移动
.hwt突出显示。这可以通过简单地给它一个
转换：translateY（px）
来实现，其中
只是文本区域当前
滚动顶部
值的负值：


$（'.linked'）。滚动（函数（）{
$（'.hwt highlights'）.css（'transform'，'translateY（${-this.scrollTop}px）`）；
});
.hwt容器{
显示：内联块；
位置：相对位置；
溢出：隐藏；
-webkit文本大小调整：无；
}
.hwt背景{
位置：绝对位置；
排名：0；
右：-99px；
底部：0；
左：0；
右侧填充：99px；
溢出x：隐藏；
溢出y：自动；
}
.hwt亮点{
宽度：自动；
高度：自动；
边框颜色：透明；
空白：预包装；
单词包装：打断单词；
颜色：透明；
溢出：隐藏；
}
.hwt输入{
显示：块；
位置：相对位置；
保证金：0；
填充：0；
边界半径：0；
字体：继承；
溢出x：隐藏；
溢出y：自动；
}
.hwt内容{
边框：1px实心；
背景：不透明；
}
.hwt内容标记{
填充：0；
颜色：继承；
}
.linked{
溢出：自动！重要；
}

突出显示文本区域内的测试
这是测试字符串，未完全显示在textarea输入的可见区域中。
这是测试字符串，未完全显示在textarea输入的可见区域中。
您需要强调的情况是什么？是文本区域的任何特定单词还是第三个单词？我的示例是静态的，没有动态条件来突出显示内容。我试图把这个例子指向从其余部分抽象出来的“滚动”问题。