用fullpage.js ，可以控制在当前页面动画完成之后才可以向下或向上滚动吗

Question

用fullpage.js ，可以控制在当前页面动画完成之后才可以向下或向上滚动吗

Answer 1

那你要看当前动画是否提供了动画结束后的回调接口了
如果使用jquery的animate的话，就有完成后的回调接口

Answer 2

我最近也碰到这个问题了，我说个思路，fullpage.js有一个默认的滚动时间，你的动画开始执行时间只要低于这个时间，就不会有动画未执行完毕，而页面已经向下向上滚动的问题了.

Answer 3

fullpage有对应方法 在滚动到第几屏禁止滚动 然后定时器 解除禁止滚动
如下
$('#fullpage').fullpage({

    verticalCentered: false,
    resize: true,
    menu: '#nav',
    paddingTop: '60px',
    scrollingSpeed: 300,
    navigation: false,
    continuousVertical: true,
    touchSensitivity: 80,
    //横向幻灯片导航的位置，可以为top或者bottom
    // slidesNavPosition: right,
    slidesNavigation: true,      //是否显示左右滑块的项目导航
    loopHorizontal: false,       //左右滑块是否循环滑动    
    controlArrowColor: '#4681f8',     //左右滑块的箭头的背景颜色
    slidesColor: ['#0075D1', '#C2E5FF', '#FDF6E1', '#E9E9E9', '#F3F3F3', '#F9F3DC'],
    anchors: ['page1', 'page2', 'page3', 'page4', 'page5', 'page6'],
    // 滚动到某一屏后的回调函数
    afterLoad: (anchorLink, index) => {
        // 根据当前第几屏 添加动画类
        switch (anchorLink) {
            case 'page1':
                $.fn.fullpage.setAllowScrolling(false)
                $.fn.fullpage.setKeyboardScrolling(false)
                setTimeout(() => {
                    $.fn.fullpage.setAllowScrolling(true)
                    $.fn.fullpage.setKeyboardScrolling(true)
                }, 2000)
                $('.section1').addClass('animate')
                break;
            case 'page2':
                $.fn.fullpage.setAllowScrolling(false)
                $.fn.fullpage.setKeyboardScrolling(false)
                setTimeout(() => {
                    $.fn.fullpage.setAllowScrolling(true)
                    $.fn.fullpage.setKeyboardScrolling(true)
                }, 2000)
                $('.section2').addClass('animate')
                break;
            case 'page3':
                $.fn.fullpage.setAllowScrolling(false)
                $.fn.fullpage.setKeyboardScrolling(false)
                setTimeout(() => {
                    $.fn.fullpage.setAllowScrolling(true)
                    $.fn.fullpage.setKeyboardScrolling(true)
                }, 2000)
                $('.section3').addClass('animate')
                break;
            case 'page4':
                $.fn.fullpage.setAllowScrolling(false)
                $.fn.fullpage.setKeyboardScrolling(false)
                setTimeout(() => {
                    $.fn.fullpage.setAllowScrolling(true)
                    $.fn.fullpage.setKeyboardScrolling(true)
                }, 2000)
                $('.section4').addClass('animate')
                break;
            case 'page5':
                $.fn.fullpage.setAllowScrolling(false)
                $.fn.fullpage.setKeyboardScrolling(false)
                setTimeout(() => {
                    $.fn.fullpage.setAllowScrolling(true)
                    $.fn.fullpage.setKeyboardScrolling(true)
                }, 2000)
                $('.section5').addClass('animate')
                $("#serviceFrom")[0].reset()
                break;
        }
    },
    // 滚动前的回调函数，接收 index、nextIndex 和 direction 3个参数
    onLeave: (index, nextIndex, direction) => {
        // 根据当前第几屏 添加动画类
        $('.section').removeClass('animate')
    }
});