Question

So I have this <div /> with overflow: auto. Inside of it are some <input type="text" /> elements. Half of the div is hidden; the user is supposed to click some navigation links to hide the first half and show the second half.

It turns out that, in Chrome (not in Firefox or IE), if the user puts his cursor inside the <input type="text" />, then drags it to the right, he can make the <div /> “scroll” to the right and show the second half of its content!!

The best I can come up with to prevent this is some kind of stupid setInterval check that will reposition the div if necessary. Is there anything cleaner?

Answer 1

Why not something like this:

<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;
}

The contents are twice as wide as the container, but the second half is hidden. To display the second half, simply set right:0; (or left:-400px;) on the .content div.

update

Set the width of the content to the width of the container (400px in this example) until you’re ready to show the second part, then resize the content to 800px and move it to display the new content.