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

To disable fullpage.js scroll after the first slide in Webflow, you need to modify how fullpage.js handles auto-scrolling after the initial section.

1. Understand the Scroll Behavior

• fullpage.js uses auto-scrolling to transition between full-page sections.
• You can enable or disable auto-scrolling dynamically using built-in methods.

2. Access fullpage.js Initialization Code

• In Webflow, fullpage.js is usually initialized in an Embed code block or inside the Custom Code > Footer section.
• Look for a script containing something like:
  new fullpage('#fullpage', { ... });

3. Modify the Configuration to Track Scroll Position

• Within the fullpage.js config, use the afterLoad callback to detect when the first section has been loaded:

• Add this to your fullpage config:
  ```javascript
  afterLoad: function(origin, destination, direction){
  if(destination.index === 1){
  fullpage_api.setAutoScrolling(false);
  }
  }
  ```

• Explanation:

• destination.index === 1 targets the second section (indexes are 0-based).

• fullpage_api.setAutoScrolling(false) disables auto scroll after the user reaches that section.

4. Prevent Scroll from Re-activating on Navigation

• If you allow navigation back to the top/first section:

• Add logic to re-enable auto scroll when returning to the first slide:
  ```javascript
  if(destination.index === 0){
  fullpage_api.setAutoScrolling(true);
  }
  ```

• Full example within your fullpage initialization block:
  ```javascript
  new fullpage('#fullpage', {
  autoScrolling: true,
  scrollHorizontally: true,
  afterLoad: function(origin, destination, direction){
  if(destination.index === 1){
  fullpage_api.setAutoScrolling(false);
  } else if(destination.index === 0){
  fullpage_api.setAutoScrolling(true);
  }
  }
  });
  ```

5. Embed the Updated Script in Webflow

• Open Webflow Designer, go to Page Settings > Before tag.
• Insert your updated fullpage init script wrapped in a <script> tag.

Summary

To stop fullpage.js scrolling after the first section in Webflow, use the afterLoad callback to disable autoScrolling when the user reaches the second section. Re-enable if navigating back to the top. This ensures a controlled scroll experience tailored to your interaction needs.