Как прокручивать текстовое поле div по мере переполнения его содержимого

Question

Я делаю калькулятор, используя CSS / HTML / JavaScript. Когда пользователь вводит число или выражение, которое слишком велико для отображения, я хотел бы, чтобы экран прокручивался в сторону, чтобы всегда отображался последний ввод. Прямо сейчас все, что происходит, - это полоса прокрутки всплывает, но остается в крайнем левом положении.

Я включил полный пример в этот JSFiddle . Я также включил соответствующие фрагменты CSS и HTML ниже.

.calculator__display {
  background-color: #222222;
  color: #fff;
  font-size: 1.714285714em;
  padding: 0.5em 0.75em;
  text-align: right;
  overflow-x: auto;
}

<div class="calculator__display">0</div>

Я хочу, чтобы поведение было похоже на панель поиска Google. По мере переполнения содержимого панель поиска настраивается автоматически. Я открыт для решений, использующих HTML, CSS и / или vanilla javascript.

Спасибо за помощь!

Answer 1

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
  }
});