Magento Question posted in
The official documentation can be found here.

How to remove parallax inner scrollbar – Magento

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 container div.

PS. This is on a magento store and I cannot change the main div

Here is my html 

<div class="container">
   <div class="parallax-wrapper">
      <div class="section parallax bg1"><span>Your Passion Is Our Passion!</span></div>
      <div class="section static">
         <p>Since more than 12 years ....</p>
      </div>
      <div class="section parallax bg2"><span>Large Choice Of Products</span></div>
      <div class="section static">
         <p>We are proud to offer you a large variety of products for every budget and taste.</p>
      </div>
      <div class="section parallax bg3"><span>Dedicated Customer Service</span></div>
      <div class="section static">
         <p>Our staff's only goal is to offer you a unique and professional experienxe.</p>
      </div>
      <div class="section parallax bg1"><span>Happy Shopping!</span></div>
   </div>
</div>

And the CSS

.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);
}

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.

Tags:

2

Answers


  1. 0

    Added body css

    body {
  margin: 0px; /* this one has been added */
}

.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(https://loremflickr.com/320/240);
}
    <div class="container">
   <div class="parallax-wrapper">
      <div class="section parallax bg1"><span>Your Passion Is Our Passion!</span></div>
      <div class="section static">
         <p>Since more than 12 years ....</p>
      </div>
      <div class="section parallax bg2"><span>Large Choice Of Products</span></div>
      <div class="section static">
         <p>We are proud to offer you a large variety of products for every budget and taste.</p>
      </div>
      <div class="section parallax bg3"><span>Dedicated Customer Service</span></div>
      <div class="section static">
         <p>Our staff's only goal is to offer you a unique and professional experienxe.</p>
      </div>
      <div class="section parallax bg1"><span>Happy Shopping!</span></div>
   </div>
</div>
    Login or Signup to reply.
  2. 0

    Remove the Overflow properties and add a background-attachment property as fixed.

    Due to the Overflow properties. It is showing the scroll bars.

    In CSS, please change these and try again

    .parallax-wrapper{
height: 100vh;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
perspective: 2px;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search