You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

fullpage.js:禁用第4节到第5节向下滚动无响应问题求助

搞定fullpage.js禁用向下滚动无响应的问题

嘿,我来帮你排查下这个问题:你想在用户处于锚点support-contact的第4节、且当前是第一个slide时,禁用向下滚动到无锚点的隐藏第5节,但调用setAllowScrolling和setKeyboardScrolling没效果,对吧?

我整理了几个可能的原因和对应的修复方案,你可以一步步试:

首先,大概率是代码触发时机不对

你原来的判断逻辑可能没绑定到fullpage的正确事件上,导致代码根本没在合适的时机执行。fullpage有专门的章节加载完成事件afterLoad,我们得把禁用滚动的逻辑放在这里面:

$(document).ready(function() { 
  initialize(false); 
  function initialize(hasScrollBar){ 
    $('#fullPage').fullpage({ 
      anchors: ['home', 'livingwell', 'happybuy', 'support-contact'], // 确保第4节的锚点配置正确
      // 章节加载完成后触发
      afterLoad: function(anchorLink, index) {
        // 获取当前章节的活跃slide索引(从0开始)
        const currentSlideIndex = $(this).find('.fp-slide.active').index();
        // 判断是否是目标场景:第4节(锚点support-contact)+ 第一个slide
        if(anchorLink === 'support-contact' && currentSlideIndex === 0) {
          // 禁用向下滚动
          $.fn.fullpage.setAllowScrolling(false, 'down'); 
          $.fn.fullpage.setKeyboardScrolling(false, 'down'); 
        } else {
          // 其他场景记得恢复向下滚动,避免全局锁死
          $.fn.fullpage.setAllowScrolling(true, 'down'); 
          $.fn.fullpage.setKeyboardScrolling(true, 'down'); 
        }
      },
      // 离开章节时也做下处理,防止回退到第4节时滚动没恢复
      onLeave: function(index, nextIndex, direction) {
        if(index === 4 && direction === 'up') {
          $.fn.fullpage.setAllowScrolling(true, 'down'); 
          $.fn.fullpage.setKeyboardScrolling(true, 'down'); 
        }
      }
    }); 
  } 
});

然后,检查你的slideIndex获取是否正确

你原来代码里的slideIndex == 0,可能没准确拿到当前章节的slide索引。上面的代码用$(this).find('.fp-slide.active').index(),this在afterLoad里指向当前加载的章节,这样获取的slide索引才是当前章节的,不会出错。

最后,排查隐藏章节的配置影响

如果第5节是隐藏的,注意别让它干扰fullpage的滚动逻辑:

  • 要是你是用display: none隐藏它,确保它不在fullpage的sections容器里,不然fullpage可能还是会把它算进滚动序列里,导致禁用向下滚动的指令不生效;
  • 如果它必须在sections里,试试给这个隐藏节加data-anchor(哪怕是个没用的锚点),或者配置scrollOverflow: false,再测试禁用滚动的效果。

额外验证小技巧

  • 打开浏览器控制台,手动执行$.fn.fullpage.setAllowScrolling(false, 'down'),看向下滚动会不会被禁用。如果生效,说明你的判断条件没触发,得打印anchorLink和slideIndex的值,确认逻辑是不是真的走到了禁用的分支;
  • 检查fullpage的版本,有些旧版本对setAllowScrolling的方向参数支持可能有问题,升级到最新稳定版试试。

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.25 07:35:50