Why are two vertical scrollbars showing?

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?

Solution 1

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

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

Solution 2

In my case I tried

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

which was removing the two sidebar but I was unable to scroll down to footer.

I used:

$('html').css('overflow-x', 'initial');

Which is working perfectly, shows only one scrollbar vertically and it is scrollable to all content at the bottom

Solution 3

You also can use this, in case something from a theme or style is causing the second bar

html {
  overflow-x: initial !important;
}

Solution 4

By two scrollbars do you mean a vertical and horizontal scrollbar? If it is, use overflow:auto instead of scroll

http://jsfiddle.net/DmqbU/2/

This will effectively only show scrollbar when needed (if horizontal content is wider than width or vertical content is taller than height)

View more solutions

Comments

[catandmouse]

Sorry, I mean 2 vertical scrollbars. I already edited my title.

[Codebeat]

Used this in css: html { overflow-x: hidden !important; }

[Jacob Broughton]

Thanks, it turns out I had two overflow properties being set and that was causing my issue. Your solution made me look.