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
相关产品推荐
相关产品推荐

