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

问题描述 投票:2回答:1

我有一个绝对定位的div内的输入字段。在div具有特定的宽度和溢出:隐藏;与输入字段被部分地在容器的范围之外使用。

问题出现在打字时,浏览器火狐(和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

html css scroll overflow
1个回答
2
投票

你可以得到这个使用JavaScript实现通过设置scrollLeft0上表示ScrollEvent:

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>
© www.soinside.com 2019 - 2024. All rights reserved.