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