title: Why can I not scroll past my parallax without moving the mouse first?
body: <p>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: </p>
  
  <p><a href="https://codepen.io/Ckuessner/pen/rNxBWvj" rel="nofollow noreferrer" title="Working exmpla of Parallax Scrolling Problem">Codepen</a></p>
  
  <p>Is there any way I can make it keep scrolling after reaching the end of the Parallax without moving the mouse first?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    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);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section&gt;
    &lt;div style="height: 100vh"&gt;
      &lt;div class="parallax"&gt;
        &lt;div class="parallax__layer parallax__layer__0"&gt;
          &lt;img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_0.png?raw=true" /&gt;
        &lt;/div&gt;
        &lt;div class="parallax__layer parallax__layer__1"&gt;
          &lt;img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_1.png?raw=true" /&gt;
        &lt;/div&gt;
        &lt;div class="parallax__layer parallax__layer__2"&gt;
          &lt;img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_2.png?raw=true" /&gt;
        &lt;/div&gt;
        &lt;div class="parallax__layer parallax__layer__3"&gt;
          &lt;img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_3.png?raw=true" /&gt;
        &lt;/div&gt;
        &lt;div class="parallax__layer parallax__layer__4"&gt;
          &lt;img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_4.png?raw=true" /&gt;
        &lt;/div&gt;
        &lt;div class="parallax__layer parallax__layer__5"&gt;
          &lt;img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_5.png?raw=true" /&gt;
        &lt;/div&gt;
        &lt;div class="parallax__layer parallax__layer__6"&gt;
          &lt;img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_6.png?raw=true" /&gt;
        &lt;/div&gt;
        &lt;div class="parallax__cover"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  
  &lt;section&gt;
    &lt;v-col class="pa-5" cols="12" md="6"&gt;
      &lt;span class="d-flex justify-center mb-5"&gt;
                Lorem ipsum dolor sit amet, consectetur adipi&lt;br /&gt;
                scin elit. Etiam vulputate augue vel felis gravida&lt;br /&gt;
                porta. Lorem ipsum dolor sit amet.
                Lorem ipsum dolor sit amet, consectetur adipi&lt;br /&gt;
                scin elit. Etiam vulputate augue vel felis gravida&lt;br /&gt;
                porta. Lorem ipsum dolor sit amet.
                Lorem ipsum dolor sit amet, consectetur adipi&lt;br /&gt;
                scin elit. Etiam vulputate augue vel felis gravida&lt;br /&gt;
                porta. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consectetur adipi&lt;br /&gt;
                scin elit. Etiam vulputate augue vel felis gravida&lt;br /&gt;
                porta. Lorem ipsum dolor sit amet.
              &lt;/span&gt;
      &lt;span class="d-flex justify-center"&gt;
                Skills
              &lt;/span&gt;
  
      &lt;span class="d-flex justify-center mb-5"&gt;
                Lorem ipsum dolor sit amet, consecte tur adipi scin e&lt;br /&gt;
                lit. Etiam vulputate augu e vel felis gravida porta.
              &lt;/span&gt;
      &lt;v-row&gt;
  
      &lt;/v-row&gt;
    &lt;/v-col&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any help is appreciated!</p>