javascript - input.scrollLeft 在 Chome 和 Firefox 中表现异常

Question

我们正在尝试构建一个带有语法高亮显示的输入字段，其中隐藏了输入，但显示了带有文本/值的覆盖 div。到目前为止，这非常有效。我们已经尝试了提到的 contenteditable 方法 here ，但它遇到了各种看起来可以解决但相当困惑的问题(例如处理光标位置和 IE 11)。

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

但是，我们遇到了浏览器之间关于如何应用 scrollLeft 的各种不一致。

奇怪的是，IE11 可以完美运行。在 Firefox (68.0.2) 中，叠加层始终偏离大约一个字符，而在 Chrome (76.0.3809.100) 中，偏移量之间的差异随着您键入的内容而变大。请参阅下面的示例代码或此 CodePen用于演示 Firefox 和 Chrome 问题。一旦输入开始溢出，这两个字段就会出现不同程度的错位。

var input = document.getElementById('input');
var container = document.getElementById('overlay');

input.addEventListener('input', (event) => {
  setTimeout(() => {
    container.innerHTML = event.target.value;
    container.scrollLeft = input.scrollLeft;
  })
});

#input {
  font: 400 1rem sans-serif;
  border: 1px solid;
  width: 200px;
  height: 20px;
  padding: 0;
}

#overlay {
  margin-top: 1rem;
  font: 400 1rem sans-serif;
  width: 200px;
  height: 20px;
  overflow: hidden;
  white-space: pre;
  border: 1px solid;
}

<input type="text" id="input">
<div id="overlay"></div>

浏览器之间的 scrollLeft 行为有何不同？我们如何确保输入和叠加位置之间的一致性？

更新

问题似乎只发生在 Windows10 上的 Chrome 中。我们使用 textarea(样式类似于 input)而不是 input，现在它可以完美运行。

Answer 1

对于 Firefox，您显然需要等待 0 毫秒。 50 毫秒 延迟对我来说似乎没问题。

var input = document.getElementById('input');
var container = document.getElementById('overlay');

input.addEventListener('input', (event) => {
  setTimeout(() => {
    container.innerHTML = event.target.value;
    container.scrollLeft = input.scrollLeft;
  }, 50)
});

#input {
  font: 400 1rem sans-serif;
  border: 1px solid;
  width: 200px;
  height: 20px;
  padding: 0;
}

#overlay {
  margin-top: 1rem;
  font: 400 1rem sans-serif;
  width: 200px;
  height: 20px;
  overflow: hidden;
  white-space: pre;
  border: 1px solid;
}

<input type="text" id="input">
<div id="overlay"></div>

对于 Chrome，我无法在 macOS 上的 v76 上重现，所以我不确定延迟技巧是否足够。