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

Question

У меня есть поле ввода в абсолютном позиционном div.У div есть определенная ширина и переполнение: скрытый;применяется с полем ввода, находящимся частично за пределами контейнера.

Проблема возникает при вводе, браузер Firefox (и Chrome также) прокручивает содержимое этого контейнера div, чтобы убедиться, что вводфокус находится в области просмотра.

.overlay {
  position: absolute;
  border: 1px fuchsia solid;
  padding: 20px;
  max-width: 200px;
  overflow: hidden;

  label {
    display: block;
    color: #000;
  }
  input {
    width: 400px;
  }
}

Как я могу остановить это, делая это?Приведенный выше пример:

https://codepen.io/meep3d/pen/jdLdqV

Answer 1

Это можно сделать с помощью JavaScript, установив scrollLeft в 0 на скроллвент:

document.getElementById('overlay').onscroll = function(){
  document.getElementById('overlay').scrollLeft = 0;
};

.overlay {
  position: absolute;
  border: 1px fuchsia solid;
  padding: 20px;
  max-width: 200px;
  overflow: hidden;
} 
label {
  display: block;
  color: #000;
}
input {
  width: 400px;
}

Outside

<div class="overlay" id="overlay">
  <label>Test Area</label>
  <input type="text" />
</div>