Fullpage.js技术问题：需隐藏指定section并禁用垂直滚动，现有代码无效

Hey there! Let's break down why your current code isn't working and get that hidden section with silentMove sorted out.

What's Wrong With Your Current Code #

First, a couple of key issues:

• The slideAnchor variable isn't a direct parameter you can use without defining it—fullpage.js's afterLoad callback actually passes four parameters: anchorLink, index, slideAnchor, slideIndex. You missed properly accessing the slide anchor/index values.
• The line $('body.fp-section.investments').find('.fp-slide').index(4,0); doesn't do what you think it does. The index() method retrieves an element's position in a set, not sets it, and your selector is targeting body (which doesn't have the fp-section class—those are on the <section> elements themselves).
• You're only handling scroll locking, but haven't accounted for visually hiding the section by default, or resetting permissions when leaving the section.

Working Solution #

Here's a revised approach that covers hiding the section, allowing silentMove to access it, and locking scroll when needed:

1. First, Add CSS to Hide the Section by Default

Add this to your stylesheet to keep the "investments" section hidden until you jump to it:

section[data-anchor="investments"] {
  display: none;
  /* Optional: Use opacity: 0; visibility: hidden; instead if you want to preserve layout space */
}

2. Update Your fullpage.js Callbacks

Replace your existing afterLoad code with this, and add an onLeave callback to handle cleanup:

$('#fullpage').fullpage({
  // Your other fullpage settings here...
  
  afterLoad: function(anchorLink, index, slideAnchor, slideIndex) {
    // Target the "investments" section, specifically when landing on its first slide (index 0)
    // Adjust slideIndex to match the specific slide you're jumping to (e.g., 4 for the 5th slide)
    if (anchorLink === 'investments' && slideIndex === 0) {
      // Show the section since we've jumped to it
      $('section[data-anchor="investments"]').show();
      
      // Lock downward scrolling to prevent leaving the section accidentally
      $.fn.fullpage.setAllowScrolling(false, 'down');
      $.fn.fullpage.setKeyboardScrolling(false, 'down');
    } else {
      // Hide the section when we're on any other section/slide
      $('section[data-anchor="investments"]').hide();
      
      // Re-enable downward scrolling for other sections
      $.fn.fullpage.setAllowScrolling(true, 'down');
      $.fn.fullpage.setKeyboardScrolling(true, 'down');
    }
  },
  
  onLeave: function(index, nextIndex, direction) {
    // If we're leaving the "investments" section, reset scroll permissions
    const currentSection = $('section').eq(index - 1);
    if (currentSection.data('anchor') === 'investments') {
      $.fn.fullpage.setAllowScrolling(true, 'down');
      $.fn.fullpage.setKeyboardScrolling(true, 'down');
    }
  }
});

Key Notes #

• Targeting the Section: Use section[data-anchor="investments"] to reliably select your section—fullpage.js automatically adds the data-anchor attribute matching your defined anchor.
• Slide Index Adjustment: If your silentMove jumps to a specific slide (not the first one), change slideIndex === 0 to match the slide's index (remember, fullpage uses 0-based indexing for slides).
• Scroll Lock Cleanup: The onLeave callback ensures that if a user navigates away from the "investments" section (via upward scroll or another link), scroll permissions are reset so other sections work normally.

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