时间戳

首页 > 解决方案 > 停止表单输入溢出滚动div内容

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

问题描述

我在绝对定位的 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

标签： htmlcssscrolloverflow

解决方案

您可以通过在滚动事件上设置为来使用 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>

推荐阅读