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

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?

Do you have have to do it like this ? Seems you could use two divs and use the CSS display property to show/hide the correct div. — SBUJOLD
– SBUJOLD, Commented Nov 10, 2010 at 21:16
Well actually I want to use jQuery animations to show the "movement" from the first half to the second half, which seems to require a structure like this... — Domenic
– Domenic, Commented Nov 10, 2010 at 22:13

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

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.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Nov 10, 2010 at 20:58

user229044♦

241k41 gold badges348 silver badges350 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Domenic Over a year ago

That is exactly what I'm doing. The problem is that if you put an <input type="text" /> inside <div class="content" />, the user can "grab" that input and use it to "scroll" to the second half.

Collectives™ on Stack Overflow

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

1 Answer 1

update

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

update

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related