title: How to remove parallax inner scrollbar
body: <p>I'm trying to add a parallax effect on the 'about us' page on my website. I managed to create the effect with pure css, but there is an inner scrollbar that appears inside the <code>container</code> div. </p>
  
  <p>PS. This is on a magento store and I cannot change the <code>main</code> div</p>
  
  <p>Here is my html </p>
  
  <pre><code>&lt;div class="container"&gt;
     &lt;div class="parallax-wrapper"&gt;
        &lt;div class="section parallax bg1"&gt;&lt;span&gt;Your Passion Is Our Passion!&lt;/span&gt;&lt;/div&gt;
        &lt;div class="section static"&gt;
           &lt;p&gt;Since more than 12 years ....&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="section parallax bg2"&gt;&lt;span&gt;Large Choice Of Products&lt;/span&gt;&lt;/div&gt;
        &lt;div class="section static"&gt;
           &lt;p&gt;We are proud to offer you a large variety of products for every budget and taste.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="section parallax bg3"&gt;&lt;span&gt;Dedicated Customer Service&lt;/span&gt;&lt;/div&gt;
        &lt;div class="section static"&gt;
           &lt;p&gt;Our staff's only goal is to offer you a unique and professional experienxe.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="section parallax bg1"&gt;&lt;span&gt;Happy Shopping!&lt;/span&gt;&lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS</p>
  
  <pre><code>.parallax-wrapper{
      height: 100vh;
      overflow-x: hidden;
      overflow-y: auto;
      perspective: 2px;
  }
  
  .section{
      position: relative;
      height: 500px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      text-shadow: 0 0 5px #000;
  }
  
  .parallax::after{
      content: " ";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      transform: translateZ(-1px) scale(1.5);
      background-size: 100%;
      z-index: -1;
  }
  
  .static {
    background: red;
    height: 200px;
  }
  
  .bg1::after {
    background-image: url(/app/design/frontend/TemplateMonster/md/web/images/bg1.jpg);
  }
  
  .bg2::after {
    background-image: url(/app/design/frontend/TemplateMonster/md/web/images/bg2.jpg);
  }
  
  .bg3::after {
    background-image: url(/app/design/frontend/TemplateMonster/md/web/images/bg3.jpg);
  }
  </code></pre>
  
  <p>I want the parallax effect to be effective when the user scrolls the entire page, not the inner scrollbar I accidently created with my code.</p>