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?

Answer 1

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

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

Answer 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

Answer 3

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

html {
  overflow-x: initial !important;
}

Answer 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)

Answer 5

这为我解决了问题：

body{overflow-y:auto}

Answer 6

add these lines to your style.css code:

html {
    height:100%;
    width:100%;
    margin:0%;
    padding:0%;
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
}

Answer 7

None of the solutions above worked for me. I tried adding overflow-y: hidden; in html and body. Finally, it worked when I added it to what I identified to be a problematic <div> . I found the problem by using Inspect Elements: I highlighted the additional scrollbar by using the "select" tool, and it showed me to which element it belonged - in my case it was a <div> called .main . Reference the screenshot below.

Answer 8

Use overflow-x and overflow-y to manage horisontal and vertical scrollbars. Just set overflow-x: none; to stop showing horisontal bar.