Javascript input.scrollLeft在Chome&；火狐

我们正试图构建一个带有语法高亮显示的输入字段，其中输入被隐藏，但显示了一个与文本/值重叠的div。到目前为止，这一切都非常有效。我们已经尝试过上面提到的contenteditable方法，但它遇到了各种问题（例如，处理光标位置和IE 11），这些问题似乎是可以解决的，但相当混乱

由于我们必须处理溢出（并且htmlInput会自动滚动），我们试图将覆盖容器的scrollLeft设置为与输入的scrollLeft相同，以使它们完全匹配

然而，我们在如何应用scrollLeft的问题上遇到了浏览器之间的各种不一致

奇怪的是，IE11工作得完美无缺。在Firefox（68.0.2）中，覆盖始终关闭大约一个字符，而在Chrome（76.0.3809.100）中，输入越多，偏移量之间的差异就越大。有关Firefox和Chrome问题的演示，请参见下面的示例代码。一旦输入开始溢出，两个字段就会出现不同程度的错位

var input=document.getElementById（'input'）；
var container=document.getElementById（'overlay'）；
input.addEventListener（'input'，（事件）=>{
设置超时（（）=>{
container.innerHTML=event.target.value；
container.scrollLeft=input.scrollLeft；
})
});
#输入{
字体：4001Rem无衬线；
边框：1px实心；
宽度：200px；
高度：20px；
填充：0；
}
#覆盖层{
页边顶部：1rem；
字体：4001Rem无衬线；
宽度：200px；
高度：20px；
溢出：隐藏；
空白：预处理；
边框：1px实心；
}
对于Firefox，您显然需要等待超过0毫秒。50毫秒的延迟对我来说似乎很好


var input=document.getElementById（'input'）；
var container=document.getElementById（'overlay'）；
input.addEventListener（'input'，（事件）=>{
设置超时（（）=>{
container.innerHTML=event.target.value；
container.scrollLeft=input.scrollLeft；
}, 50)
});
#输入{
字体：4001Rem无衬线；
边框：1px实心；
宽度：200px；
高度：20px；
填充：0；
}
#覆盖层{
页边顶部：1rem；
字体：4001Rem无衬线；
宽度：200px；
高度：20px；
溢出：隐藏；
空白：预处理；
边框：1px实心；
}

输入没有scrollLeft属性，因为它不可滚动。我根本不知道如何移动视口…输入是一个元素，所以我不明白为什么输入不应该为您的响应添加一个hanks！50毫秒的延迟似乎确实解决了Firefox的问题。至于Chrome，这个问题似乎只发生在Windows（确切地说是Windows 10）系统上，而它在macOS上运行良好（据我们所知，至少是10.14.5）。不幸的是，对于Chrome，我无法验证，但你确定这两个元素使用相同的字体吗？此外，还要仔细检查与文本呈现相关的每个属性，例如，以及列出的所有属性。不幸的是，css选项没有任何区别。在chrome中，这两个字段在任何滚动出现之前都是完全匹配的，所以沿着这些线可能什么都不是。最后，我们决定使用
textarea
而不是
input
-字段，现在我们的解决方案可以完美地工作。无论如何，谢谢你的帮助。