我正在尝试使用这样的平滑滚动效果:Smooth scroll effect
我发现 position:fixed;
(或绝对)是问题的根源。如果我更改此值,它会完美地工作,但我不能,因为我有一个覆盖视口(viewport)的 bg 图像并且无法找到解决它的方法。
我该如何解决这个问题?我找到了这个 article我认为这可以解决问题,但我似乎无法实现。
我用来定位背景图片的 css 如下所示:
.bg {
background-repeat:no-repeat;
background-position:center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:100%;
height:100%;
position:fixed;
background-image: url( http://lorempixel.com/400/200/);
}
最佳答案
就我个人而言,我会修复左上角的 div,而不是将整个页面内容包裹在其中。
jsfiddle:https://jsfiddle.net/jhyvcgv7/1/
.bg {
background-repeat:no-repeat;
background-position:center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:100%;
height:100%;
position:fixed;
background-image: url( http://lorempixel.com/400/200/);
top: 0;
left: 0;
z-index: -1;
}
关于javascript - 位置 :fixed; 的平滑滚动问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44767658/