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
JavaScript
x
5
1
const scroller = new LocomotiveScroll({2
el: document.querySelector("[data-scroll-container]"),3
smooth: true,4
multiplier:.705
});JavaScript
1
39
39
1
*{2
margin: 0;3
padding: 0;4
box-sizing: border-box;5
}6
7
h1{8
height: 100vh;9
display: flex;10
align-items: center;11
justify-content: center;12
font-size: 100px;13
}14
#about-section{15
height: 400vh;16
17
}18
.font{19
position: relative;20
padding: 30px;21
font-size: 70px; ;22
}23
.text{24
position: absolute;25
border: 3px solid white;26
height: fit-content;27
width: 50%;28
right: 0;29
margin-top: -100px;30
}31
.mb-8{32
margin-bottom: 5em;33
}34
p{35
font-size: 50px;36
}37
.container{38
padding: 50px;39
}JavaScript
1
106
106
1
<!DOCTYPE html>2
<html lang="en">3
<head>4
<meta charset="UTF-8" />5
<meta http-equiv="X-UA-Compatible" content="IE=edge" />6
<meta name="viewport" content="width=device-width, initial-scale=1.0" />7
<link8
rel="stylesheet"9
href="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.css"10
/>11
<link rel="stylesheet" href="/main.css" />12
<title>Document</title>13
</head>14
<body>15
<div data-scroll-container>16
<section class="sec1" data-scroll-section>17
<h1>Section 1</h1>18
</section>19
<section id="about-section" data-scroll-section>20
<div class="container">21
<div id="about">22
<h223
class="font"24
data-scroll25
data-scroll-sticky26
data-scroll-target="#about-section"27
>28
About29
</h2>30
<div class="container text">31
<p class="mb-8">32
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis33
pretium, ante sed lacinia ultricies, sapien massa ultricies34
erat, eu tristique justo est ut tortor. In nibh est, porttitor35
vulputate erat et, faucibus volutpat felis. Curabitur eleifend36
nisi quis consectetur euismod. Morbi ac condimentum ante.37
Aliquam euismod sodales arcu et iaculis. Cras porttitor nisl38
felis, eget interdum magna cursus et. Curabitur vehicula39
dignissim ornare.40
</p>41
<p class="mb-8">42
Cras lacinia sit amet justo ut maximus. Integer sapien felis,43
gravida a commodo et, porttitor non libero. Maecenas lacinia44
accumsan eros eu dapibus. Mauris dolor odio, vulputate vitae45
purus vitae, tincidunt egestas orci. Maecenas sollicitudin46
fringilla justo, id tempus metus elementum sit amet. Nullam47
vestibulum mauris vitae condimentum sagittis. Suspendisse sed48
purus vel neque ullamcorper ornare egestas vel ligula. Duis ac49
mattis odio. Aliquam sodales turpis nec diam maximus, nec50
fermentum massa mollis.51
</p>52
<p>53
Praesent finibus egestas velit, vitae tristique leo luctus sit54
amet. Vivamus eu facilisis neque, a venenatis mi. Vestibulum55
ultricies venenatis arcu sit amet fringilla. Curabitur non56
tincidunt sem. Sed quis quam ut nulla tincidunt dapibus quis ac57
lorem. Nulla lobortis ac metus ut molestie.58
</p>59
</div>60
</div>61
</div>62
</section>63
<section id="client" data-scroll-section>64
<div class="container">65
<div id="client-section">66
<h2 class="font" data-scroll data-scroll-sticky data-scroll-target="#client">67
Client68
</h2>69
<div class="container text">70
<p class="mb-8">71
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis72
pretium, ante sed lacinia ultricies, sapien massa ultricies73
erat, eu tristique justo est ut tortor. In nibh est, porttitor74
vulputate erat et, faucibus volutpat felis. Curabitur eleifend75
nisi quis consectetur euismod. Morbi ac condimentum ante.76
Aliquam euismod sodales arcu et iaculis. Cras porttitor nisl77
felis, eget interdum magna cursus et. Curabitur vehicula78
dignissim ornare.79
</p>80
<p class="mb-8">81
Cras lacinia sit amet justo ut maximus. Integer sapien felis,82
gravida a commodo et, porttitor non libero. Maecenas lacinia83
accumsan eros eu dapibus. Mauris dolor odio, vulputate vitae84
purus vitae, tincidunt egestas orci. Maecenas sollicitudin85
fringilla justo, id tempus metus elementum sit amet. Nullam86
vestibulum mauris vitae condimentum sagittis. Suspendisse sed87
purus vel neque ullamcorper ornare egestas vel ligula. Duis ac88
mattis odio. Aliquam sodales turpis nec diam maximus, nec89
fermentum massa mollis.90
</p>91
<p>92
Praesent finibus egestas velit, vitae tristique leo luctus sit93
amet. Vivamus eu facilisis neque, a venenatis mi. Vestibulum94
ultricies venenatis arcu sit amet fringilla. Curabitur non95
tincidunt sem. Sed quis quam ut nulla tincidunt dapibus quis ac96
lorem. Nulla lobortis ac metus ut molestie.97
</p>98
</div>99
</div>100
</div>101
</section>102
</div>103
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js"></script>104
<script src="loco.js"></script>105
</body>106
</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
JavaScript
1
31
31
1
<div class="container text">2
<p class="mb-8">3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis4
pretium, ante sed lacinia ultricies, sapien massa ultricies5
erat, eu tristique justo est ut tortor. In nibh est, porttitor6
vulputate erat et, faucibus volutpat felis. Curabitur eleifend7
nisi quis consectetur euismod. Morbi ac condimentum ante.8
Aliquam euismod sodales arcu et iaculis. Cras porttitor nisl9
felis, eget interdum magna cursus et. Curabitur vehicula10
dignissim ornare.11
</p>12
<p class="mb-8">13
Cras lacinia sit amet justo ut maximus. Integer sapien felis,14
gravida a commodo et, porttitor non libero. Maecenas lacinia15
accumsan eros eu dapibus. Mauris dolor odio, vulputate vitae16
purus vitae, tincidunt egestas orci. Maecenas sollicitudin17
fringilla justo, id tempus metus elementum sit amet. Nullam18
vestibulum mauris vitae condimentum sagittis. Suspendisse sed19
purus vel neque ullamcorper ornare egestas vel ligula. Duis ac20
mattis odio. Aliquam sodales turpis nec diam maximus, nec21
fermentum massa mollis.22
</p>23
<p>24
Praesent finibus egestas velit, vitae tristique leo luctus sit25
amet. Vivamus eu facilisis neque, a venenatis mi. Vestibulum26
ultricies venenatis arcu sit amet fringilla. Curabitur non27
tincidunt sem. Sed quis quam ut nulla tincidunt dapibus quis ac28
lorem. Nulla lobortis ac metus ut molestie.29
</p>30
</div>31
and the style of the class text is something like this
JavaScript
1
8
1
.text{2
position: absolute;3
border: 3px solid white;4
height: fit-content;5
width: 50%;6
right: 0;7
margin-top: -100px;}8
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.