fullPage.js开启scrollOverflow时窗口resize页面跳至底部问题求助

Hey there! I’ve run into this exact fullPage.js issue before when using scrollOverflow: true, so let me share the fixes that worked for me:

1. Lock Current Section Position in afterResize Callback #

The most reliable fix I found is manually forcing fullPage to stay on the active section after a resize. When scrollOverflow: true is enabled, resizing the window triggers a recalculation of section heights, which often causes unwanted scrolling. Add this to your afterResize function:

afterResize: function () {
    // Get the index of the currently active section
    const activeSectionIndex = fullpage_api.getActiveSection().index;
    // Move back to the active section without animation to avoid jarring jumps
    fullpage_api.moveTo(activeSectionIndex, 0, true);
}

Make sure you’re using the fullpage_api object (available after initializing fullPage) to access these methods.

2. Adjust the scrollOverflowReset Configuration #

Your current config has scrollOverflowReset: false, but toggling this to true can sometimes resolve resize-related scroll glitches. This setting controls whether scroll overflow resets to the top when leaving a section, and in some cases, it prevents unintended scroll jumps during resizing:

scrollOverflowReset: true

Test this alongside the afterResize fix for best results.

3. Tweak fitToSection Behavior During Resize #

Even with fitToSection: false, the fitToSectionDelay might still trigger unwanted positioning during resizes. Try temporarily disabling fitToSection in the resize callback, then re-enable it if needed:

afterResize: function () {
    // Temporarily disable fitToSection to prevent auto-scrolling
    fullpage_api.setFitToSection(false);
    
    // Lock to the active section
    const activeSectionIndex = fullpage_api.getActiveSection().index;
    fullpage_api.moveTo(activeSectionIndex, 0, true);
    
    // Optional: Re-enable fitToSection after a short delay if you need it later
    setTimeout(() => {
        fullpage_api.setFitToSection(true);
    }, 100);
}

4. Check for Conflicting Scroll Listeners #

Double-check your code for any custom window resize or scroll event listeners that might be modifying window.scrollTop or interfering with fullPage’s internal scroll management. These can clash with scrollOverflow’s behavior and cause unexpected jumps.

Bonus: Update to the Latest fullPage.js Version #

Older versions of fullPage.js had known bugs with scrollOverflow and resizing. Upgrading to the most recent release might resolve the issue without needing custom fixes.

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