Javascript 如何让div文本框在内容溢出时滚动

我正在用CSS/HTML/JavaScript制作一个计算器。当用户输入的数字或表达式对于显示器来说太大时，我希望显示器能够横向滚动，以便始终显示最新的输入。现在，所有发生的是滚动条弹出，但停留在最左边的位置

我在本文中包含了一个完整的示例。我还包括了下面的相关CSS和HTML片段

。计算器显示{
背景色：#22222；
颜色：#fff；
字号：1.714285714em；
填充：0.5em 0.75em；
文本对齐：右对齐；
溢出-x：自动；
}

0

我想要类似谷歌搜索栏的行为。当内容溢出时，搜索栏会自动调整。我对使用HTML、CSS和/或普通javascript的解决方案持开放态度

---

谢谢你的帮助

这是可行的，但您需要将.calculator\uuu显示包装到另一个div中，并将填充改为margin for.calculator\uu显示只需添加以下内容：方向：rtl；到你的.calculator\uuuu显示{css.I在你的小提琴上测试过，看起来很好。不需要javascript。看起来也完全受支持：

keys.addEventListener('click', e => {
  if (e.target.matches('button')) {
    const key = e.target;
    const displayNum = display.textContent;
    display.textContent = displayNum + key.textContent;
    display.scrollLeft = display.scrollWidth; //add this to scroll to the end
  }
});