Question

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

/* 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");
}

但是当我禁用页面时，会发现页面移位。我该如何防止这种情况？

Answer 1

您正在使用的术语 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'
     });
}

需要在没有页面移位的情况下禁用html页面上的滚动？

1 个答案: