使用Locomotive Scroll时滚动条无法完全滚动至页面底部的问题求助

Hey there! I’ve dug into your code and spotted the exact issues stopping you from scrolling all the way to the bottom. Let’s fix this step by step:

What’s causing the problem? #

1. Misconfigured sticky element target: You’re setting data-scroll-target to the entire section (#about-section/#client), but Locomotive Scroll’s sticky feature needs a direct parent container that wraps both the sticky heading and its corresponding content. This throws off the scroll range calculation.
2. Fixed section height: The 400vh hardcoded height on #about-section conflicts with how Locomotive Scroll calculates actual content length. Sticky logic relies on natural content height to determine when the sticky element should stop sticking.

Fixed Code #

HTML #

Adjust the data-scroll-target to point to the direct parent of the sticky heading, and let sections resize naturally:

<!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">
<!-- Target this parent container instead of the whole section -->
<h2 class="font" data-scroll data-scroll-sticky data-scroll-target="#about" > 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">
<!-- Target this parent container -->
<h2 class="font" data-scroll data-scroll-sticky data-scroll-target="#client-section"> 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 #

Remove the fixed section height and add positioning for sticky parents:

*{ margin: 0; padding: 0; box-sizing: border-box; }
h1{ height: 100vh; display: flex; align-items: center; justify-content: center; font-size: 100px; }
/* Removed #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; }
/* Ensure sticky parent has relative positioning */
#about, #client-section {
  position: relative;
  min-height: 100vh; /* Optional: ensures sections take at least full viewport height */
}

JavaScript #

Your existing code is good to go:

const scroller = new LocomotiveScroll({ 
  el: document.querySelector("[data-scroll-container]"), 
  smooth: true, 
  multiplier:.70 
});

Why this works: #

• Targeting the direct parent of the sticky element lets Locomotive Scroll accurately calculate when the heading should start/stop sticking relative to its content.
• Letting sections resize naturally based on content ensures Locomotive Scroll can correctly detect the bottom of the page.

Give this a shot—your full page scrolling should work perfectly now!

内容的提问来源于stack exchange，提问作者KINETIC