fullpage.js 2.9.7滚动到最后一个section向下滚动时销毁实例的实现方法

你可以通过fullpage.js 2.x版本提供的onLeave滚动回调判断当前滚动位置，触发到最后一个section向下滚动时调用官方提供的销毁方法即可，完整修改后的代码如下：

完整代码 #

<div class="wrap">
  <header></header>

  <main class="main">
    <section>1</section>
    <section>2</section>
    <section>3</section>
    <section>4</section>
  </main>

  <div class="aside"></div>

  <footer></footer>
</div>

<script>
$(document).ready(function() {
    // 定义fullpage配置，方便后续复用
    const fpOptions = {
        scrollBar: true,
        onLeave: function(index, nextIndex, direction) {
            const totalSections = $('.main .section').length;
            // 从最后一个section向下滚动时触发销毁
            if(index === totalSections && direction === 'down') {
                // 销毁fullpage实例，传入true保留原始DOM结构，仅移除事件绑定和特殊样式
                $.fn.fullpage.destroy(true);
                // 销毁后自动滚动到main区域底部，衔接后续内容滚动
                $('html, body').scrollTop($('.main').offset().top + $('.main').outerHeight());
            }
        }
    };

    // 初始化fullpage
    $('.main').fullpage(fpOptions);

    // 可选优化：向上滚动回到main区域时重新初始化fullpage，不需要可直接删除
    let reInitFpLock = false;
    $(window).on('scroll', function() {
        const scrollTop = $(window).scrollTop();
        const mainBottom = $('.main').offset().top + $('.main').outerHeight();
        if(scrollTop < mainBottom && !$.fn.fullpage.getAllFullpageInstances().length && !reInitFpLock) {
            reInitFpLock = true;
            $('.main').fullpage(fpOptions);
            // 跳转到对应高度的section
            $.fn.fullpage.moveTo(Math.round(scrollTop / $(window).height()) + 1);
            setTimeout(() => {
                reInitFpLock = false;
            }, 300);
        }
    })
});
</script>

关键逻辑说明 #

• onLeave是fullpage.js提供的页面切换前触发的回调，三个参数分别是离开的section序号、目标section序号、滚动方向
• 2.x版本的fullpage销毁方法为$.fn.fullpage.destroy()，传入true时会保留原始DOM结构，仅移除fullpage绑定的滚动事件和自动生成的特殊类名样式
• 可选的重新初始化逻辑可以实现上下滚动时的交互一致性，不需要可以直接删除对应代码

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