Question

在网站上工作时遇到以下问题。 Magnific Popup（灯箱插件）将HTML设置为溢出：隐藏;当灯箱打开时，这会阻止滚动。

在我的页面上，我有一个固定的标题图片：

.header {
background-image: url("http://placehold.it/1920x400");
height: 400px;
background-size: contain;
background-attachment: fixed;
}

当我打开灯箱时，html设置为溢出：隐藏; 并且背景图片移动。溢出：隐藏;导致背景移动。

我不知道这种行为是什么，我尝试了以下几点：

我简化了我的代码并最终得到了这个Codepen，看到后台移动点击按钮。

Codepen： Link to codepen

希望你能帮助我，

的Wouter

修改

我想解决移动背景而不将溢出设置为自动。当灯箱打开时，当滚动条可见时，我不喜欢它。

Answer 1

已修复：此关键字表示背景已根据视口修复。

由于您的元素相对于“视口”定位，因此当您切换到overflow: hidden时，视口移动稍微宽一些，删除滚动条会因为您使用{而导致背景重新定位{1}}。背景现在有更多的空间来覆盖，因此尺寸略有增加。

尽管我讨厌使用background-size: contain，但您可以覆盖插件的更改：

!important

如果插件使用的是一个类而不是直接改变html元素的样式，那么你可以重写它而不重要。

Answer 2

找到了解决这个问题的方法，这是在css reddit中发布的：