Why can I not scroll past my parallax without moving the mouse first?

Question

So I am trying to do a Webpage with a Parallax landing picture. For the Parallax effect to work, it has a higher height, so the user will have to scroll down. This creates a second scrollbar on the side only for this Parallax. So far so good. The problem is when I scroll down to the end of the Parallax, the second scrollbar is not activated automatically, I have to move the mouse a little bit to continue scrolling on the normal content of the Webpage. Here is a working example of my problem:

Codepen

Is there any way I can make it keep scrolling after reaching the end of the Parallax without moving the mouse first?

* {
  box-sizing: border-box;
}

html,
body {
  background-color: #fedcc8;
}

.parallax {
  -webkit-perspective: 100px;
  perspective: 100px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  top: 0;
  left: 50%;
  right: 0;
  bottom: 0;
  margin-left: -1500px;
}

.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.parallax__layer img {
  display: block;
  position: absolute;
  bottom: 0;
}

.parallax__cover {
  background: #2d112b;
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 1000px;
  z-index: 2;
}

.parallax__layer__0 {
  -webkit-transform: translateZ(-300px) scale(4);
  transform: translateZ(-300px) scale(4);
}

.parallax__layer__1 {
  -webkit-transform: translateZ(-250px) scale(3.5);
  transform: translateZ(-250px) scale(3.5);
}

.parallax__layer__2 {
  -webkit-transform: translateZ(-200px) scale(3);
  transform: translateZ(-200px) scale(3);
}

.parallax__layer__3 {
  -webkit-transform: translateZ(-150px) scale(2.5);
  transform: translateZ(-150px) scale(2.5);
}

.parallax__layer__4 {
  -webkit-transform: translateZ(-100px) scale(2);
  transform: translateZ(-100px) scale(2);
}

.parallax__layer__5 {
  -webkit-transform: translateZ(-50px) scale(1.5);
  transform: translateZ(-50px) scale(1.5);
}

.parallax__layer__6 {
  -webkit-transform: translateZ(0px) scale(1);
  transform: translateZ(0px) scale(1);
}

<section>
  <div style="height: 100vh">
    <div class="parallax">
      <div class="parallax__layer parallax__layer__0">
        <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_0.png?raw=true" />
      </div>
      <div class="parallax__layer parallax__layer__1">
        <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_1.png?raw=true" />
      </div>
      <div class="parallax__layer parallax__layer__2">
        <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_2.png?raw=true" />
      </div>
      <div class="parallax__layer parallax__layer__3">
        <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_3.png?raw=true" />
      </div>
      <div class="parallax__layer parallax__layer__4">
        <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_4.png?raw=true" />
      </div>
      <div class="parallax__layer parallax__layer__5">
        <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_5.png?raw=true" />
      </div>
      <div class="parallax__layer parallax__layer__6">
        <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_6.png?raw=true" />
      </div>
      <div class="parallax__cover"></div>
    </div>
  </div>
</section>

<section>
  <v-col class="pa-5" cols="12" md="6">
    <span class="d-flex justify-center mb-5">
              Lorem ipsum dolor sit amet, consectetur adipi<br />
              scin elit. Etiam vulputate augue vel felis gravida<br />
              porta. Lorem ipsum dolor sit amet.
              Lorem ipsum dolor sit amet, consectetur adipi<br />
              scin elit. Etiam vulputate augue vel felis gravida<br />
              porta. Lorem ipsum dolor sit amet.
              Lorem ipsum dolor sit amet, consectetur adipi<br />
              scin elit. Etiam vulputate augue vel felis gravida<br />
              porta. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consectetur adipi<br />
              scin elit. Etiam vulputate augue vel felis gravida<br />
              porta. Lorem ipsum dolor sit amet.
            </span>
    <span class="d-flex justify-center">
              Skills
            </span>

    <span class="d-flex justify-center mb-5">
              Lorem ipsum dolor sit amet, consecte tur adipi scin e<br />
              lit. Etiam vulputate augu e vel felis gravida porta.
            </span>
    <v-row>

    </v-row>
  </v-col>
</section>

Any help is appreciated!

Answer 1

As you have two scrollbars, the behaviour you described is intended. You can't change this behaviour. What you can do is to alter your solution so that it conforms to the intended behaviour (i.e. make one scrollbar appear only instead of two).

You're using perspective and translateZ to create the parallax effect. This means that the container of the "parallax-ed" items must have the perspective property and the items themselves must be a direct descendent of the container. In the solution below, we're setting the perspective attribute to the body element. This means that the parallax only occurs when the body element is scrolled. Without configuring the overflow of the html element, the scroll will appear on the html element; thus, it is essential to set the html element's overflow attribute to hidden. This will cause the scrollbar to appear on the body element.

My answer is very similar to Dennis Ranish's answer. However, I use background-image and background-position: center bottom to make it so that the image is automatically centered regardless of its width (in your solution, you used margin-left: -1500px to do this). Using this solution, you need not know the intrinsic size (original size) of the image and the image will always be centered even if you change the image later on. This is more flexible than using fixed units. Coincidentally, this requires me to use divs and this works in your favour (because you mentioned a problem of using img directly in Vue [do take a look further to see what the underlying problem exactly is; it might not simply be caused by the div]).

Furthermore, I used top: 100% and position: relative to adjust it so that the content is located directly below the image. Here's the solution.

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  overflow: hidden;
}

body {
  overflow-x: hidden;
  background-color: #fedcc8;
  height: 100vh;
  -webkit-perspective: 100px;
  perspective: 100px;
}

div[class^="parallax__layer"] {
  position: absolute;
  bottom: 0;
  left: 0;
  width:100vw;
  height:100vh;
  background-repeat: no-repeat;
  background-position-y: bottom;
  background-position-x: center;
}

h1 {
  font-family: Helvetica;
  color: #fff;
  text-align: center;
}

.parallax__content {
  background: #2d112b;
  top: 100%;
  position: relative;
  padding: 200px 100px;
}

.parallax__layer--zero {
  background: url('https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_0.png?raw=true');
  -webkit-transform: translateZ(-300px) scale(4);
  transform: translateZ(-300px) scale(4);
}

.parallax__layer--one {
  background: url('https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_1.png?raw=true');
  -webkit-transform: translateZ(-250px) scale(3.5);
  transform: translateZ(-250px) scale(3.5);
}

.parallax__layer--two {
  background: url('https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_2.png?raw=true');
  -webkit-transform: translateZ(-200px) scale(3);
  transform: translateZ(-200px) scale(3);
}

.parallax__layer--three {
  background: url('https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_3.png?raw=true');
  -webkit-transform: translateZ(-150px) scale(2.5);
  transform: translateZ(-150px) scale(2.5);
}

.parallax__layer--four {
  background: url('https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_4.png?raw=true');
  -webkit-transform: translateZ(-100px) scale(2);
  transform: translateZ(-100px) scale(2);
}

.parallax__layer--five {
  background: url('https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_5.png?raw=true');
  -webkit-transform: translateZ(-50px) scale(1.5);
  transform: translateZ(-50px) scale(1.5);
}

.parallax__layer--six {
  background-image: url('https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_6.png?raw=true');
  -webkit-transform: translateZ(0px) scale(1);
  transform: translateZ(0px) scale(1);
}

<div class='parallax__layer--zero'></div>
<div class='parallax__layer--one'></div>
<div class='parallax__layer--two'></div>
<div class='parallax__layer--three'></div>
<div class='parallax__layer--four'></div>
<div class='parallax__layer--five'></div>
<div class='parallax__layer--six'></div>
<div class='parallax__content'>
  <h1>Hello y'all, this parallax works!</h1>
</div>