scrollTop and html overflow: hidden

Question

When a CSS rule is set like this

html { overflow: hidden; }

I can't get or set scroll position in Chrome using javascript anymore (only DOMElement.scrollIntoView is working).

When I remove it it works but it messes up the whole page containing a "parallax effect" created with CSS3. Here is a reduced example (only prefixed with -webkit-): http://jsfiddle.net/BaliBalo/LxCxn/

Answer 1

You can do by using the clearfix to do "layout preversing" the same way overflow: hidden does.

.clearfix:before,
.clearfix:after {
  content: ".";    
  display: block;    
  height: 0;    
  overflow: hidden; 
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;} /* IE < 8 */

add class="clearfix" class to the parent, and remove overflow: hidden;