在网站上工作时遇到了以下问题.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; 当灯箱打开时,这也行不通.
我简化了我的代码并最终得到了这个Codepen,看到后台移动点击按钮.
Codepen: 链接到codepen
希望你能帮助我,
沃特
编辑:
我想解决移动背景而不将溢出设置为auto.当灯箱打开时滚动条可见时,我不喜欢它.