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

您可以通过在滚动事件上将scrollLeft设置为0来使用JavaScript来完成此操作：

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内容

1 个答案: