How can I disable the fullpage.js scroll after the first slide on a Webflow page?

To disable fullpage.js scrolling after the first section in your Webflow project, you'll need to use logic in custom code that limits fullpage.js behavior based on the current section.

1. Understand fullpage.js Behavior

• fullpage.js creates a full-screen, scroll-snapping experience where each .section is a slide.
• By default, it enables vertical scrolling for all sections unless manually restricted.

2. Add Section Anchors or IDs

• Ensure your sections have either anchors (via data-anchor attributes) or unique IDs so you can target them via JavaScript.
• For example:
• First section: data-anchor="first"
• Second section: data-anchor="second"

3. Initialize fullpage.js with AfterLoad Hook

• Use the afterLoad callback to destroy scrolling once the first section is passed.
• Example logic:
• After the user scrolls to the second section, call fullpage_api.destroy('all') to stop fullpage.js.

4. Add Custom Code in Webflow

• Go to Page Settings > Before tag and add:

<script>  var fullPageInstance;  document.addEventListener('DOMContentLoaded', function () {    fullPageInstance = new fullpage('#fullpage', {      autoScrolling: true,      navigation: true,      onLeave: function(origin, destination, direction){        if(origin.index === 0 && direction === 'down'){          fullpage_api.destroy('all');        }      }    });  });</script>

• This script:
• Initializes fullpage.js.
• Monitors when you leave the first section (origin.index === 0).
• Destroys fullpage.js when scrolling past the first section.

5. Set Up Your Page Structure

• Make sure your sections:
• Use the standard fullpage.js structure with a wrapper like #fullpage.
• Have class .section (or whatever selector you're using).
• Ensure your second and subsequent sections handle normal scrolling without fullpage.js features.

Summary

To disable fullpage.js scrolling after the first slide, use the onLeave callback to detect when the user scrolls from the first to the second section, then call fullpage_api.destroy('all') to deactivate fullpage.js. This allows normal scrolling behavior beyond the first slide.