我有一个绝对定位的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;
}
}
我怎么能阻止它这样做?上面的例子是上:
你可以得到这个使用JavaScript实现通过设置scrollLeft
到0
上表示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>