Javascript 在将“隐藏”属性更改为“自动溢出”属性时避免抖动

我有一个模态对话框要打开。当模式窗口打开时，我想禁用背景滚动。因此，当对话框打开时，我将

overflow:hidden

添加到

body

标记中。通过这样做，滚动条来了又去了

body

标记，这导致我的UI出现了一些抖动。我知道这种冲动会发生，因为滚动条使用了保留的空间。当对话框打开和关闭时，是否有任何方法可以避免急动并禁用背景滚动

请查找下面所附的代码

var launch=document.getElementById（'btn'）；
var dialog=document.getElementById（'dialog'）；
var close=document.getElementById（'close'）；
var body=document.querySelector（'body'）；
launch.onclick=openmodel；
close.onclick=closeModal；
函数openModal（）{
dialog.style.display=“block”；
body.style.overflow=“隐藏”；
}
函数closeModal（）{
dialog.style.display=“无”；
body.style.overflow=“自动”；
}

正文{
保证金：0；
}
.整体{
高度：1000px；
宽度：100%；
位置：相对位置；
文本对齐：右对齐；
填充：0；
光标：指针；
}
.莫代尔{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
背景：#aaa；
边框：1px实心#fdfdfd；
高度：200px；
宽度：400px；
}
跨度{
文本对齐：右对齐；
光标：指针；
宽度：100%；
显示：块；
文本对齐：右对齐；
}

单击以启动modal
关闭

添加一个

overflow-y:scroll

到

html

，默认情况下强制滚动条。当模态出现时，这将防止中心跳动

html {
  overflow-y: scroll;
} 

---

这个问题也依赖于浏览器，因为某些浏览器的滚动条不占用水平空间（如Chrome）

据我所知，只有一种方法可以解决您的问题：
1.保持溢出状态：

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

将位置设置为固定：

.莫代尔{ 位置：固定； }

---

您可以临时添加一个

右边距

，这是滚动条的宽度。如果你有大量的样式和背景色，这可能是不够的。但对于简单的布局，它可以很好地工作

var launch=document.getElementById（'btn'）；
var dialog=document.getElementById（'dialog'）；
var close=document.getElementById（'close'）；
var body=document.querySelector（'body'）；
launch.onclick=openmodel；
close.onclick=closeModal；
函数openModal（）{
var widthBefore=body.offsetWidth；
dialog.style.display=“block”；
body.style.overflow=“隐藏”；
body.style.marginRight=body.offsetWidth-widthBefore+“px”；
}
函数closeModal（）{
dialog.style.display=“无”；
body.style.overflow=“自动”；
body.style.marginRight=“”；
}

正文{
保证金：0；
}
.整体{
高度：1000px；
宽度：100%；
位置：相对位置；
文本对齐：右对齐；
填充：0；
光标：指针；
}
.莫代尔{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
背景：#aaa；
边框：1px实心#fdfdfd；
高度：200px；
宽度：400px；
}
跨度{
文本对齐：右对齐；
光标：指针；
宽度：100%；
显示：块；
文本对齐：右对齐；
}

单击以启动modal
关闭

作为解决方案-您可以在使用body margin类隐藏卷轴后保留此正文空间。所以，当您隐藏垂直滚动时-您正在增加正文的右边距，当您显示时-删除此保留

检查下面的示例。它有一些缺点（不同的浏览器，不同的操作系统主题，等等），但它是我的项目的快速修复

因此，可能需要额外的计算，如当前滚动宽度

var launch=document.getElementById（'btn'）；
var dialog=document.getElementById（'dialog'）；
var close=document.getElementById（'close'）；
var body=document.querySelector（'body'）；
launch.onclick=openmodel；
close.onclick=closeModal；
函数openModal（）{
dialog.style.display=“block”；
body.style.overflow=“隐藏”；
body.style.marginRight=“17px”；
}
函数closeModal（）{
dialog.style.display=“无”；
body.style.overflow=“自动”；
body.style.marginRight=“0”；
}

正文{
保证金：0；
}
.整体{
高度：1000px；
宽度：100%；
位置：相对位置；
文本对齐：右对齐；
填充：0；
光标：指针；
}
.莫代尔{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
背景：#aaa；
边框：1px实心#fdfdfd；
高度：200px；
宽度：400px；
}
跨度{
文本对齐：右对齐；
光标：指针；
宽度：100%；
显示：块；
文本对齐：右对齐；
}

单击以启动modal
关闭

为什么不使用bootstrap模式呢？它将帮助您编写大量css，您必须编写bootstrap UII中已经存在的控件。我通常不相信第三方。我喜欢写代码myself@degr如果你看一下代码，你会发现我动态计算了滚动条的大小。这不是一个固定的值。是的，我明白了，但仍然不是个好主意，因为边距已经可以用在一些自定义CSS样式中了。@degr我在回答的开头用免责声明说明了这一点。这是由OP来决定这是否适用于他们的网站，但我认为公平地说，它确实适用于问题中提供的示例。。。body.offsetWidth-之前的宽度。当我将宽度存储在

widthBefore

中时，仍然有一个滚动条。然后，将

溢出

设置为

隐藏

，使滚动条消失，偏移宽度更改。此行计算这两种情况之间的差异，以便能够纠正由于删除滚动条而导致的宽度更改。滚动条宽度取决于浏览器。是的，它是。和操作系统主题相关。但这是我的特殊情况下的解决方案，所以我只是分享了非常快速的解决方案。我已经更新了我的答案。因为您的默认状态是scroll o