Bootstrap 4 打开模式时背景图像跳转

我用Bootstrap4构建了一个具有视差效果的页面和一个图像库。 问题是，当我打开一个模式时，背景图像会跳跃/调整大小，我觉得我已经尽了一切努力来解决这个问题。 BS很好地保持了所有其他元素的位置，不管滚动条与否，但不包括背景图像

---

当您打开一个

引导模式时

，如果您打开了，它将删除垂直滚动条，因此您感觉背景图像在跳跃。这就是我们的特色

如果您想覆盖它的css，您可以在css的末尾添加以下代码

 .modal-open {
   overflow-y: inherit;  
 }

最好使用

overflow-y:inherit

而不是使用

overflow-y:scroll

，如下所述：

 .modal-open {
   overflow-y: scroll;  
 }

看，它正在工作

编辑：

 .modal-open{
  padding:0 !important;
  overflow-y: auto;
 }

在css中添加上述代码。你所有的问题都解决了。有关详细信息：

希望这个解决方案对你有用

---

如果您有任何疑问，请在评论部分进行评论。

是否有理由认为“继承”比“滚动”更好？是的@Thornos，

inherit

将在您的页面有滚动时添加滚动，但如果您的页面不包含滚动，如果你添加了

overflow-y:scroll

，那么它将添加滚动。关于代码：我知道BS的一个功能是使用填充来补偿滚动条的删除，这对除背景图像以外的所有图像都很好

.modal.open:{overflow-y:inherit；}

与

滚动

的结果相同。现在，除了背景图像之外，所有的东西都在跳跃

body.modal-open{padding:0！important；}

修复了这个问题，除了导航栏，如果无法完成BS补偿功能，背景也被修复，导航栏仍然会跳转（代码段中没有显示）Iwonder？@Thornos，我编辑了我的答案。如果需要，请查看更多详细信息。经过一些测试，我发现为了防止引导导航栏跳转，如果您将内容集中在导航栏中，我必须将

class=px-0

添加到导航栏中。问题似乎出在

background:fixed cover

如果我放置bg图像在html元素上，它实际上适合整个屏幕，包括滚动条，因此它停止调整大小。可悲的是，这似乎会导致引导或其他方面的问题，因为导航栏链接开始出现问题，scrollspy也停止工作，我需要通过js替换背景img，以获得多个bg图像的视差效果。我尝试在html、body和原始div上使用

width:100vw

，但bg img仅在应用于html元素时忽略滚动条。