Javascript mouse movement parallax div

Question

I have a problem with this javascript. On my website is a parallax div and it should scroll if i move my mouse. This script works so far but it scrolls on the body and not on the parallax div, like it should.

var x, y;
function handleMouse(e) {
  if (x && y) {
    window.scrollBy(e.clientX - x, e.clientY - y);
  }
  x = e.clientX;
  y = e.clientY;
}
document.onmousemove = handleMouse;

HTML

        <div class="parallax">
            <div class="parallax__layer parallax__layer--deep">
                <img id="background" src="img/deep.png">
            </div>
            <div class="parallax__layer parallax__layer--back">
                <img id="blatt" src="img/back.png">
            </div>
            <div class="parallax__layer parallax__layer--base">
                <img id="farn" src="img/base.png">
            </div>
            <div class="parallax__layer parallax__layer--ground">
                <div id="faul">
                    <img id="sloth" src="img/y3oVSt2.png">
                </div>
            </div>
        </div>

CSS

.parallax {
   perspective: 1px;
   height: 150vh;
   overflow-x: scroll;
   overflow-y: scroll;
   margin-left: -730px;
   margin-top: -300px;
}
.parallax__layer img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.parallax__layer--ground {
    transform: translateZ(0px);
}
.parallax__layer--base {
    transform: translateZ(0px);
}
.parallax__layer--back {
    transform: translateZ(-5px) scale(2);
}
.parallax__layer--deep {
    transform: translateZ(-10px) scale(5);
}

Answer 1

It's because you are calling .scrollBy() on window. Instead, you want to adjust the .scrollTop and .scrollLeft properties of the .parallax div:

var speed = 5 //adjust to change parallax scroll speed
var x, y;
function handleMouse(e) {
  if (x && y) {
    document.getElementsByClassName("parallax")[0].scrollTop += speed*(e.clientY - y);
    document.getElementsByClassName("parallax")[0].scrollLeft += speed*(e.clientX - x);
  }
  x = e.clientX;
  y = e.clientY;
}
document.onmousemove = handleMouse;

You also might want to reset x and y when your mouse leaves the window, otherwise you could get jumps if, for example, the mouse leaves from left and then re-enters from the right:

document.onmouseleave = function() {
  x = undefined;
  y = undefined;
}

Check out the working fiddle: https://jsfiddle.net/uw2n0jox/3/