停止表单输入溢出滚动 div 内容

Question

我在绝对定位 div 中有一个输入字段。 div 有一个特定的宽度和 overflow: hidden;在输入字段部分超出容器范围的情况下应用。

输入时出现问题，浏览器 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>

停止表单输入溢出滚动 div 内容

Stop form input overflow scrolling div contents

html

css

scroll

overflow