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/locomotive-scroll@3.5.4/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/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js"></script>
<script src="loco.js"></script>
</body>
</html>Advertisement
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.