Skip to content

Scrollbar not scrolling completely down the page while using locomotive scroll

I will try ti keep it as simple as possible! This is my first time using locomotive scroll while I am testing my code out I am not able to scroll all the way below. The scroll bar is visible but but I am not able to scroll or drag it using the mouse. I seriously spend hours to find any solution for this issue here but had no success yet. It will be great if someone can help me out to solve this issue here. Thank you for your time

const scroller = new LocomotiveScroll({
  el: document.querySelector("[data-scroll-container]"),
  smooth: true,
  multiplier:.70
});
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

 h1{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 100px;
}
#about-section{
    height: 400vh;
    
}
.font{
    position: relative;
    padding: 30px;
    font-size: 70px; ;
}
.text{
    position: absolute;
    border: 3px solid white;
    height:  fit-content;
    width: 50%;
    right: 0;
    margin-top: -100px;
}
.mb-8{
    margin-bottom: 5em;
}
p{
    font-size: 50px;
}
.container{
    padding: 50px;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.css"
    />
    <link rel="stylesheet" href="/main.css" />
    <title>Document</title>
  </head>
  <body>
    <div data-scroll-container>
      <section class="sec1" data-scroll-section>
        <h1>Section 1</h1>
      </section>
      <section id="about-section" data-scroll-section>
        <div class="container">
          <div id="about">
            <h2
            class="font"
              data-scroll
              data-scroll-sticky
              data-scroll-target="#about-section"
            >
              About
            </h2>
            <div class="container text">
              <p class="mb-8">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
                pretium, ante sed lacinia ultricies, sapien massa ultricies
                erat, eu tristique justo est ut tortor. In nibh est, porttitor
                vulputate erat et, faucibus volutpat felis. Curabitur eleifend
                nisi quis consectetur euismod. Morbi ac condimentum ante.
                Aliquam euismod sodales arcu et iaculis. Cras porttitor nisl
                felis, eget interdum magna cursus et. Curabitur vehicula
                dignissim ornare.
              </p>
              <p class="mb-8">
                Cras lacinia sit amet justo ut maximus. Integer sapien felis,
                gravida a commodo et, porttitor non libero. Maecenas lacinia
                accumsan eros eu dapibus. Mauris dolor odio, vulputate vitae
                purus vitae, tincidunt egestas orci. Maecenas sollicitudin
                fringilla justo, id tempus metus elementum sit amet. Nullam
                vestibulum mauris vitae condimentum sagittis. Suspendisse sed
                purus vel neque ullamcorper ornare egestas vel ligula. Duis ac
                mattis odio. Aliquam sodales turpis nec diam maximus, nec
                fermentum massa mollis.
              </p>
              <p>
                Praesent finibus egestas velit, vitae tristique leo luctus sit
                amet. Vivamus eu facilisis neque, a venenatis mi. Vestibulum
                ultricies venenatis arcu sit amet fringilla. Curabitur non
                tincidunt sem. Sed quis quam ut nulla tincidunt dapibus quis ac
                lorem. Nulla lobortis ac metus ut molestie.
              </p>
            </div>
          </div>
        </div>
      </section>
      <section id="client" data-scroll-section>
        <div class="container">
          <div id="client-section">
            <h2 class="font" data-scroll data-scroll-sticky data-scroll-target="#client">
              Client
            </h2>
            <div class="container text">
                <p class="mb-8">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
                  pretium, ante sed lacinia ultricies, sapien massa ultricies
                  erat, eu tristique justo est ut tortor. In nibh est, porttitor
                  vulputate erat et, faucibus volutpat felis. Curabitur eleifend
                  nisi quis consectetur euismod. Morbi ac condimentum ante.
                  Aliquam euismod sodales arcu et iaculis. Cras porttitor nisl
                  felis, eget interdum magna cursus et. Curabitur vehicula
                  dignissim ornare.
                </p>
                <p class="mb-8">
                  Cras lacinia sit amet justo ut maximus. Integer sapien felis,
                  gravida a commodo et, porttitor non libero. Maecenas lacinia
                  accumsan eros eu dapibus. Mauris dolor odio, vulputate vitae
                  purus vitae, tincidunt egestas orci. Maecenas sollicitudin
                  fringilla justo, id tempus metus elementum sit amet. Nullam
                  vestibulum mauris vitae condimentum sagittis. Suspendisse sed
                  purus vel neque ullamcorper ornare egestas vel ligula. Duis ac
                  mattis odio. Aliquam sodales turpis nec diam maximus, nec
                  fermentum massa mollis.
                </p>
                <p>
                  Praesent finibus egestas velit, vitae tristique leo luctus sit
                  amet. Vivamus eu facilisis neque, a venenatis mi. Vestibulum
                  ultricies venenatis arcu sit amet fringilla. Curabitur non
                  tincidunt sem. Sed quis quam ut nulla tincidunt dapibus quis ac
                  lorem. Nulla lobortis ac metus ut molestie.
                </p>
              </div>
          </div>
        </div>
      </section>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.min.js"></script>
    <script src="loco.js"></script>
  </body>
</html>

Answer

I found the solution for this problem it was actually the position property in CSS as you see here I added a class called text

 <div class="container text">
            <p class="mb-8">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
              pretium, ante sed lacinia ultricies, sapien massa ultricies
              erat, eu tristique justo est ut tortor. In nibh est, porttitor
              vulputate erat et, faucibus volutpat felis. Curabitur eleifend
              nisi quis consectetur euismod. Morbi ac condimentum ante.
              Aliquam euismod sodales arcu et iaculis. Cras porttitor nisl
              felis, eget interdum magna cursus et. Curabitur vehicula
              dignissim ornare.
            </p>
            <p class="mb-8">
              Cras lacinia sit amet justo ut maximus. Integer sapien felis,
              gravida a commodo et, porttitor non libero. Maecenas lacinia
              accumsan eros eu dapibus. Mauris dolor odio, vulputate vitae
              purus vitae, tincidunt egestas orci. Maecenas sollicitudin
              fringilla justo, id tempus metus elementum sit amet. Nullam
              vestibulum mauris vitae condimentum sagittis. Suspendisse sed
              purus vel neque ullamcorper ornare egestas vel ligula. Duis ac
              mattis odio. Aliquam sodales turpis nec diam maximus, nec
              fermentum massa mollis.
            </p>
            <p>
              Praesent finibus egestas velit, vitae tristique leo luctus sit
              amet. Vivamus eu facilisis neque, a venenatis mi. Vestibulum
              ultricies venenatis arcu sit amet fringilla. Curabitur non
              tincidunt sem. Sed quis quam ut nulla tincidunt dapibus quis ac
              lorem. Nulla lobortis ac metus ut molestie.
            </p>
          </div>

and the style of the class text is something like this

.text{
position: absolute;
border: 3px solid white;
height:  fit-content;
width: 50%;
right: 0;
margin-top: -100px;}

so as soon as I removed position: absolute; from the code my error was resolved. And I removed position: relative; from the class .font as well and then I got the output as I expected. Hope this will help in future.