javascript - 使用溢出时防止用户滚动 : auto in Chrome

Question

所以我有这个 <div />与 overflow: auto .里面有一些<input type="text" />元素。一半的 div 被隐藏；用户应该点击一些导航链接来隐藏前半部分并显示后半部分。

事实证明，在 Chrome 中(不是在 Firefox 或 IE 中)，如果用户将光标放在 <input type="text" /> 中，然后向右拖动，他可以使<div />向右“滚动”并显示其内容的后半部分!!

我能想出的最好的办法就是使用某种愚蠢的方法来防止这种情况发生 setInterval检查是否会在必要时重新定位 div。有没有更干净的东西？

Answer 1

为什么不是这样的:

<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 像素并移动它以显示新内容。