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

找到了解决我问题的方法。我只需要添加：

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

Answer 2

您也可以使用它，以防主题或样式中的某些内容导致第二个栏

html {
  overflow-x: initial !important;
}

Answer 3

就我而言，我试过

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

这是删除两个侧边栏，但我无法向下滚动到页脚。

我用了：

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

完美运行，仅垂直显示一个滚动条，并且可以滚动到底部的所有内容