Question

I did something like this to initially hide the body scrollbar, and then show it when a link is clicked:

$('body').css('overflow', 'hidden');
$('#site').click(function(e) {
    $('#wrapper').remove();
    $('body').css('overflow', 'scroll');
    return false;
});

At first, it does hide the scrollbar and just shows a scrollbar for the overlay (absolutely positioned div (#wrapper)) but when I click on the link (#site) to show the scrollbar again (and remove the overlay), it now shows two scrollbars: one is working, the other is disabled.

HTML:

<div id="wrapper">
   --- some content ----
   <a href="" id="site"></a>
</div>

<div>
   --- rest of the website ---
</div>

CSS:

#wrapper {  
    background-color: #CCC;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99999; 
    height: 800px;
}

What has gone wrong?

Answer 1

Found a solution to my problem. I just needed to add:

$('html').css('overflow', 'hidden');