javascript - 位置 :fixed; 的平滑滚动问题

Question

我正在尝试使用这样的平滑滚动效果: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/);
}

Jsfiddle

Answer 1

就我个人而言，我会修复左上角的 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;
}