使用机车滚动时，滚动条不会完全向下滚动页面
Scrollbar not scrolling completely down the page while using locomotive scroll
我会尽量保持简单！这是我第一次使用机车滚动，同时我正在测试我的代码，我无法一直滚动到下面。滚动条是可见的，但我无法使用鼠标滚动或拖动它。我认真地花了几个小时在这里找到这个问题的任何解决方案，但还没有成功。如果有人可以帮助我在这里解决这个问题，那就太好了。谢谢你的时间
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>
我找到了这个问题的解决方案，它实际上是 CSS 中的位置 属性，正如您在此处看到的，我添加了一个名为 text
的 class
<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>
class文字的样式是这样的
.text{
position: absolute;
border: 3px solid white;
height: fit-content;
width: 50%;
right: 0;
margin-top: -100px;}
所以，一旦我从代码中删除 position: absolute;，我的错误就解决了。我也从 class .font 中删除了 position: relative; 然后我得到了我预期的输出。希望这对以后有所帮助。
我会尽量保持简单！这是我第一次使用机车滚动，同时我正在测试我的代码，我无法一直滚动到下面。滚动条是可见的，但我无法使用鼠标滚动或拖动它。我认真地花了几个小时在这里找到这个问题的任何解决方案，但还没有成功。如果有人可以帮助我在这里解决这个问题，那就太好了。谢谢你的时间
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>
我找到了这个问题的解决方案，它实际上是 CSS 中的位置 属性，正如您在此处看到的，我添加了一个名为 text
的 class <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>
class文字的样式是这样的
.text{
position: absolute;
border: 3px solid white;
height: fit-content;
width: 50%;
right: 0;
margin-top: -100px;}
所以，一旦我从代码中删除 position: absolute;，我的错误就解决了。我也从 class .font 中删除了 position: relative; 然后我得到了我预期的输出。希望这对以后有所帮助。