如何在移除滾動條時維護html內容位置？

Question

有時在顯示彈出窗口時，我想從正文中移除滾動（將其設置爲溢出爲隱藏），問題在於，根據瀏覽器和操作系統的不同，它可能有也可能沒有永久滾動條（如最新版本的IOS和Ubuntu有一個滾動條可以在懸停時切換）。

所以，當我做的：

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

內容可以移動X像素的權利，因爲滾動條是從視拍攝空間。爲了解決這個問題我想過這樣做：

var width = $(window).width(); 
    $('body').css('overflow','hidden'); 
    var margin = $(window).width() - width; 
    $('html').css('margin-right',margin); 

這似乎因爲它增加了在滾動條的寬度相同的權利白條做工精細，但如果有固定的元素，這並不工作該頁面（當滾動條被移除時它將向右移動）。

如何在移除滾動條的同時保持所有內容的位置？

Answer 1

我知道這是個老問題，但你的腳本幫助我處理固定的div。在我的情況下，我有100％寬度的固定標題。一切工作正常，只是在啓動腳本後，固定div中的一些元素仍然改變位置。所以，在你的腳本中，我包括在此：

$('.header').css({ 'width': 'calc(100% - ' + margin+ 'px)' }); 

和關閉腳本之後：

$('.header').css('width','100%'); 

正如我以前說過，在我的情況該工作得很好。

完整的腳本是這樣的：

點擊時：

var width = $(window).width(); 
$('html').css('overflow','hidden'); 

var margin = $(window).width() - width; 
$('html').css('margin-right',margin); 

$('.header').css({ 'width': 'calc(100% - ' + margin+ 'px)' }); 

後關閉：

var width = $(window).width(); 
$('html').css('overflow','visible'); 

var margin = $(window).width() - width; 
$('html').css('margin-right',margin); 

$('.header').css('width','100%'); 

對不起，我英文不好。我希望這個答案能幫助別人。

Answer 2

我認爲你的解決方案很好。你只需要做一些CSS來使白色滾動條佔位符更不明顯。

替代品包括：

• 使用填充填寫的差異，而不是保證金
• 絕對定位的內容和使用left屬性將其鎖定在窗口的左側（沒有滾動條）

您也可以提前測量帶有JavaScript的os滾動條的寬度，這樣您可以使用一個數字來進行風格調整，請參閱this。