Body set to overflow-y:hidden but page is still scrollable in Chrome
Setting a height on your body and html of 100% should fix you up. Without a defined height your content is not overflowing, so you will not get the desired behavior.
html, body {
overflow-y:hidden;
height:100%;
}
I finally found a way to fix the issue so I'm answering here.
I set the overflow-y on the #content instead, and wrapped my steps in another div. It works.
Here is the final code:
<body>
<div id="content">
<div id="steps">
<div class="step">this is the 1st step</div>
<div class="step">this is the 2nd step</div>
<div class="step">this is the 3rd step</div>
</div>
</div>
</body>
#content {
position:absolute;
width:100%;
overflow-y:hidden;
top:0;
bottom:0;
}
.step {
position:relative;
height:500px;
margin-bottom:500px;
}
What works for me on /FF and /Chrome:
body {
position: fixed;
width: 100%;
height: 100%;
}
overflow: hidden just disables display of the scrollbars. (But you can put it in there if you like to).
There is one drawback I found: If you use this method on a page which you want only temporarily to stop scrolling, setting position: fixed will scroll it to the top.
This is because position: fixed uses absolute positions which are currently set to 0/0.
This can be repaired e.g. with jQuery:
var lastTop;
function stopScrolling() {
lastTop = $(window).scrollTop();
$('body').addClass( 'noscroll' )
.css( { top: -lastTop } )
;
}
function continueScrolling() {
$('body').removeClass( 'noscroll' );
$(window).scrollTop( lastTop );
}