javascript - 将隐藏更改为自动溢出属性时避免 SCSS

Question

我有一个模式对话框要打开。当模式窗口打开时，我想禁用背景滚动。所以我在打开对话框时将 overflow:hidden 添加到 body 标签。通过执行此滚动条，body 标记来来去去，结果导致我的 UI 出现一些困惑。我知道由于滚动条使用了保留空间，所以会出现这种情况。有什么方法可以避免 SCSS ，并在对话框打开和关闭时禁用背景滚动。

请在下面找到附加的代码

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(){
	dialog.style.display = "block";
  body.style.overflow = "hidden";
}

function closeModal(){
	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 由于上述问题，它会出现抖动

请引用工作 fiddle 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>