Using perspective and transform: translateZ to create a Parallax effect - how can I put the scroll on the body and not the container?

My demo

I created the parallax effect below on the page (this is the place I want it to appear).

But the parallax effect is based on overflow scrolling ONLY this section of the page, not scrolling the entire page.

How do I get the parallax effect that occurs while scrolling the entire page, not just after scrolling the element containing the parallax? I don't want the scrollbars to appear in the parallax section in FF and IE (but it didn't work in IE regardless).

Here's my local 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;
}