CODEWITHSUNDEEP
javascriptcssgoogle-chrome
Domenic
Domenic

Reputation: 112807

Prevent the user from scrolling when using overflow: auto in Chrome

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?

Upvotes: 1

Views: 338

Answers (1)

user229044
user229044

Reputation: 239240

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.

Upvotes: 2

Related Questions