需要禁用頁面移動的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頁面上滾動？

回答

相關問題