使用透视和变换：translateZ创建视差效果 - 如何将滚动基于主体而不是容器？

Question

My Demo

我在页面上创建了视差效果（这是我希望它出现的位置）。

但是视差效果是基于 ONLY 溢出的滚动，而不是整页的滚动。

如何在整个页面滚动时发生视差效果，而不仅仅是在滚动包含视差的元素时？我不希望滚动条出现在FF＆amp;的视差部分。 IE（不管是否可以在IE中使用）。

这是我的相关CSS：

.parallax {
  background: lightgrey;
  position: relative;
  perspective: 1px;
  perspective-origin-x: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  height: 300px;
}
.parallax .layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 60px;
}
.parallax .layer:nth-of-type(1) {
  background: #F06D61;
  transform: translateZ(-4px) scale(5);
  top: -340px;
}
.parallax .layer:nth-of-type(2) {
  background: #DA825F;
  transform: translateZ(-1px) scale(2);
  top: 140px;
}
.parallax .layer:nth-of-type(3) {
  background: #C4975C;
  transform: translateZ(0) scale(1);
  top: 230px;
}