1

我有一个单击按钮的 HTML 页面，我正在显示与 div 在同一页面上制作的弹出窗口。在显示该弹出窗口时，我需要禁用父页面的滚动条。目前我正在这样做：

/* Function to disable parent page scrollbar */
function DisableParentPageScroll(){
    $('body,html').css('overflow-y','hidden');
}

/* Function to enable parent page scrollbar */
function EnableParentPageScroll(){
    $('body,html').removeAttr("style");
}

但是当我禁用页面时，会观察到页面偏移。我怎样才能防止这种情况？

4

1 回答 1

2

您使用Page Shift的术语，它的发生是因为您正在移除滚动条，并且当​​移除滚动条时，空间变为空，然后设计文档获得更多空间并因此移动。如果你想避免这种情况，你必须Padding or Margin在外部包装器或<body>.

例如像这样

/* Function to disable parent page scrollbar */
function DisableParentPageScroll(){
    $('html').css('overflow', 'hidden'); // Added this for few browsers
    $('body').css({
        'overflow-y':'hidden',
        'padding-right': '20px' // Asuming the scrollbar width as 20px
     });
}

/* Function to enable parent page scrollbar */
function EnableParentPageScroll(){
    $('html').removeAttr('style'); // Added this for few browsers
    $('body').css({
        'overflow-y':'auto',
        'padding-right': '0'
     });
}
于 2012-06-28T10:33:49.860 回答