將隱藏更改爲自動溢出屬性時避免混亂

Question

我有一個要打開的模式對話框。當模式窗口打開時，我想禁用背景滾動。所以當對話框打開時，我已將overflow:hidden添加到body標籤。通過這樣做滾動條來去body標籤，結果導致我的用戶界面一些混蛋。我知道這個混蛋會發生，因爲滾動條使用了保留的空間。是否有任何方法可以避免混亂，並且在對話框打開和關閉時禁用背景滾動。

附上以下

var launch = document.getElementById('btn'); 
 
var dialog = document.getElementById('dialog'); 
 
var close = document.getElementById('close'); 
 
var body = document.querySelector('body'); 
 
launch.onclick = openModal; 
 
close.onclick = closeModal; 
 

 
function openModal(){ 
 
\t dialog.style.display = "block"; 
 
    body.style.overflow = "hidden"; 
 
} 
 

 
function closeModal(){ 
 
\t dialog.style.display = "none"; 
 
    body.style.overflow = "auto"; 
 
}

body{ 
 
    margin:0; 
 
} 
 
.overall{ 
 
    height:1000px; 
 
    width:100%; 
 
    position:relative; 
 
    text-align:right; 
 
    padding: 0; 
 
    cursor:pointer; 
 
    
 
} 
 
.modal{ 
 
    position:absolute; 
 
    top:50%; 
 
    left:50%; 
 
    transform:translate(-50%,-50%); 
 
    background:#aaa; 
 
    border:1px solid #fdfdfd; 
 
    height:200px; 
 
    width:400px; 
 
} 
 
span{ 
 
    text-align: right; 
 
    cursor: pointer; 
 
    width: 100%; 
 
    display: block; 
 
    text-align:right; 
 
    
 
}

<div class="overall" id="btn"> 
 
    click to launch modal 
 
</div> 
 
<div class="modal" id="dialog" style="display:none"> 
 
    <span id="close"> close</span> 
 
</div>

密切注意click to launch text代碼就會有因上述問題挺舉

請參閱工作小提琴here

Answer 1

你可以臨時添加一個margin-right這就是滾動條的寬度。如果你有很多造型和背景顏色的話，這可能是不夠的。但對於簡單的佈局，它工作正常。

var launch = document.getElementById('btn'); 
 
var dialog = document.getElementById('dialog'); 
 
var close = document.getElementById('close'); 
 
var body = document.querySelector('body'); 
 
launch.onclick = openModal; 
 
close.onclick = closeModal; 
 

 

 
function openModal(){ 
 
    var widthBefore = body.offsetWidth; 
 
    dialog.style.display = "block"; 
 
    body.style.overflow = "hidden"; 
 
    
 
    body.style.marginRight = body.offsetWidth - widthBefore + "px"; 
 

 
} 
 

 
function closeModal(){ 
 
    dialog.style.display = "none"; 
 
    body.style.overflow = "auto"; 
 
    body.style.marginRight = ""; 
 
}

body{ 
 
    margin:0; 
 
} 
 
.overall{ 
 
    height:1000px; 
 
    width:100%; 
 
    position:relative; 
 
    text-align:right; 
 
    padding: 0; 
 
    cursor:pointer; 
 
    
 
} 
 
.modal{ 
 
    position:absolute; 
 
    top:50%; 
 
    left:50%; 
 
    transform:translate(-50%,-50%); 
 
    background:#aaa; 
 
    border:1px solid #fdfdfd; 
 
    height:200px; 
 
    width:400px; 
 
} 
 
span{ 
 
    text-align: right; 
 
    cursor: pointer; 
 
    width: 100%; 
 
    display: block; 
 
    text-align:right; 
 
    
 
}

<div class="overall" id="btn"> 
 
    click to launch modal 
 
</div> 
 
<div class="modal" id="dialog" style="display:none"> 
 
    <span id="close"> close</span> 
 
</div>

Answer 2

添加一個overflow-y: scroll到html默認強制滾動條。這將防止模態出現時的居中跳躍。

html { 
    overflow-y: scroll; 
} 

此問題也依賴於瀏覽器，因爲某些瀏覽器滾動條不佔用水平空間（如Chrome）。

Answer 3

據我所知，只有一個辦法如何解決您的問題：
1.保持溢出的是：

function openModal(){ 
    dialog.style.display = "block"; 
} 

設定位置固定：

.modal {position}：fixed; }

Answer 4

作爲一個解決方案 - 你可以使用體保證金類隱藏滾動後保留這一機構的空間。所以當你隱藏垂直滾動時 - 當你顯示時，你正在增加身體右邊距 - 刪除這個保留。

檢查下面的例子。它有一些缺點（不同的瀏覽器，不同的操作系統主題等），但它是我的項目的快速修復。

因此可能需要額外的計算，例如當前的滾動寬度。http://jsfiddle.net/UU9kg/17/

var launch = document.getElementById('btn'); 
 
var dialog = document.getElementById('dialog'); 
 
var close = document.getElementById('close'); 
 
var body = document.querySelector('body'); 
 
launch.onclick = openModal; 
 
close.onclick = closeModal; 
 

 
function openModal(){ 
 
\t dialog.style.display = "block"; 
 
    body.style.overflow = "hidden"; 
 
    body.style.marginRight = "17px"; 
 
} 
 

 
function closeModal(){ 
 
\t dialog.style.display = "none"; 
 
    body.style.overflow = "auto"; 
 
    body.style.marginRight = "0"; 
 
}

body{ 
 
    margin:0; 
 
} 
 
.overall{ 
 
    height:1000px; 
 
    width:100%; 
 
    position:relative; 
 
    text-align:right; 
 
    padding: 0; 
 
    cursor:pointer; 
 
    
 
} 
 
.modal{ 
 
    position:absolute; 
 
    top:50%; 
 
    left:50%; 
 
    transform:translate(-50%,-50%); 
 
    background:#aaa; 
 
    border:1px solid #fdfdfd; 
 
    height:200px; 
 
    width:400px; 
 
} 
 
span{ 
 
    text-align: right; 
 
    cursor: pointer; 
 
    width: 100%; 
 
    display: block; 
 
    text-align:right; 
 
    
 
}

<div class="overall" id="btn"> 
 
    click to launch modal 
 
</div> 
 
<div class="modal" id="dialog" style="display:none"> 
 
    <span id="close"> close</span> 
 
</div>