所以我有这个 <div />
与 overflow: auto
.里面有一些<input type="text" />
元素。一半的 div 被隐藏;用户应该点击一些导航链接来隐藏前半部分并显示后半部分。
事实证明,在 Chrome 中(不是在 Firefox 或 IE 中),如果用户将光标放在 <input type="text" />
中,然后向右拖动,他可以使<div />
向右“滚动”并显示其内容的后半部分!!
我能想出的最好的办法就是使用某种愚蠢的方法来防止这种情况发生 setInterval
检查是否会在必要时重新定位 div。有没有更干净的东西?
最佳答案
为什么不是这样的:
<div class="container">
<div class="content">
</div>
</div>
.container {
width:400px;
overflow:hidden;
position:relative;
}
.container .content {
width:800px;
position:absolute;
top:0;
left:0;
}
内容是容器的两倍宽,但后半部分是隐藏的。要显示下半部分,只需在 .content
div 上设置 right:0;
(或 left:-400px;
)即可。
更新
将内容的宽度设置为容器的宽度(本例中为 400 像素),直到您准备好显示第二部分,然后将内容的大小调整为 800 像素并移动它以显示新内容。
关于javascript - 使用溢出时防止用户滚动 : auto in Chrome,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4148935/