移动与溢出隐藏的背景

Question

在网站上工作时遇到了以下问题.Magnific Popup(灯箱插件)将HTML设置为溢出:隐藏; 当灯箱打开时,这会阻止滚动.

在我的页面上,我有一个固定的标题图像:

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

当我打开灯箱时,html被设置为溢出:隐藏; 并且背景图像移动.溢出:隐藏; 导致背景移动.

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

• Magnific Popup还在html元素上设置了一个margin-right,以防止内容移动,这不适用于后台.

• 尝试过设置overflow-y:scroll; 当灯箱打开时,这也行不通.

• 使用background-origin或background-clip似乎也无法解决问题.

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

Codepen: 链接到codepen

希望你能帮助我,

沃特

编辑:

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

Answer 1

来自MDN的文章background-attachment:

修复: 此关键字表示背景是相对于视口修复的.

因为您的元素相对于"视口"定位,所以当您切换到时overflow: hidden,视口会随着滚动条的移除而略微变宽,从而导致由于您的使用而重新定位背景background-size: contain.背景现在有更多的空间可以覆盖,因此尺寸略有增加.

尽管我讨厌使用!important,你可以覆盖插件的更改:

html{
    margin-right: 0 !important;
    overflow: auto !important;
}

如果插件使用类而不是直接更改html元素的样式,则可以重写它而不重要.