需要禁用页面移动的HTML页面上滚动？

我点击了一个按钮，我有一个HTML页面，我正在显示与div相同的页面上创建的Popup。在显示该弹出窗口时，我需要禁用父页面的滚动条。目前我这样做：需要禁用页面移动的HTML页面上滚动？

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

但是当我禁用页面有观察页面转换。我怎样才能防止这个？

来源

2012-06-28 Balraj Singh

你是什么意思的页面移位？在点击之后，您可以执行一项操作，首先保存滚动条的当前滚动位置，在用户确认后，将页面恢复到该位置，然后将溢出设置为隐藏状态。 – SexyBeast

你的意思是滚动条消失时的转变吗？ – WolvDev

您正在使用的术语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-28 10:33:49 Subhajit

页面上移怎么办？实际上，当我向下滚动页面并打开弹出窗口时，父页面会返回顶部，因为我将溢出视为隐藏。有什么工作吗？ –

当弹出窗口打开时，您是否让页面溢出隐藏？如果不是，请分享这个要求。 – Subhajit

是的，当弹出窗口打开时，我正在让页面溢出隐藏。但是，如果我从页面底部打开弹出窗口，则父页面会滚动回页面的顶部。当隐藏溢出时，我希望父页面保持在相同的位置。 –

需要禁用页面移动的HTML页面上滚动？

回答

相关问题