How can I disable the fullpage.js scroll after the first slide on a Webflow page?
TL;DR
- Wrap only the first section in the fullpage.js container and leave all other sections outside it.
- Initialize fullpage.js for the first section and destroy it using fullpage_api.destroy('all') when the user scrolls past, restoring native scrolling for the rest.
To disable fullpage.js scroll after the first slide in a Webflow project, you need to limit fullpage.js to control only the first section and allow standard scrolling for the rest.
1. Identify the First Section as a Fullpage Slide
- Assign a unique class or ID (e.g.,
#first-slide) to the first section you want fullpage.js to control. - All subsequent sections should not be included in the fullpage.js wrapper.
2. Structure the Page Correctly
- Wrap only the first section in the
.fullpagecontainer (or the class you’ve defined with fullpage.js). - The rest of your sections should lie outside that fullpage wrapper in the Webflow Designer's structure.
3. Initialize fullpage.js for Only the First Section
- Add custom code in the Before </body> tag section of Page Settings or via Page Custom Code.
- Use
scrollOverflow: trueand leave out options for additional sections.
Example initialization:
new fullpage('#first-slide', {
autoScrolling: true,
scrollOverflow: true,
licenseKey: 'your-license-key',
onLeave: function(origin, destination, direction){
if(origin.index === 0){
fullpage_api.destroy('all'); // Disable fullpage after first section
}
}
});
- This tells fullpage.js to initialize only for the #first-slide element and disables itself once the user scrolls past it.
4. Re-enable Native Scrolling for Rest of the Page
- When fullpage.js is destroyed with
fullpage_api.destroy('all'), Webflow’s default scroll behavior resumes. - Ensure sections after the first one have a normal Webflow layout and are not inside fullpage’s container.
5. Test Responsiveness and Edge Cases
- Make sure fullpage.js resets correctly with resizing; mobile behavior might require tweaks.
- On repeated navigation (e.g., using anchor links), ensure fullpage isn’t re-initialized erroneously.
Summary
To disable fullpage.js after the first slide, initialize it only for the first section, then use JavaScript to destroy fullpage.js when leaving that section—enabling native scroll for the rest of the page. Ensure other sections are outside the fullpage wrapper in Webflow.
