fullPage.js 不触发滚动事件

Question

我在我的页面中添加了 fullpage.js，我正在尝试从 JQuery 添加 scroll 事件，但我不知道为什么我无法触发，但是当我删除fullpage.js scroll 事件正在触发。

HTML

<div class="container-fluid">
    <div id="fullpage">
        <div class="section " id="home">
            <div class="container-fluid">
                <div class="row homeDiv">
                    <div class="col-md-6 leftDiv animated animated fadeInRight"></div>
                    <div class="col-md-6 rightDiv animated animated fadeInLeft"></div>
                </div>
            </div>
        </div>
        <div class="section" id="features">Features</div>
        <div class="section" id="pricing">Pricing</div>
        <div class="section" id="contact">Contact</div>
    </div>
    <div id="footer">Footer</div>

JS

$(document).ready(function () {
    "use strict";
    /* init full page scroll */
    $('#fullpage').fullpage({
        sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke'],
        anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
        /*Adding function to display the current nav-item using afterLoad Callback -> fullPage.js*/
        afterLoad: function (anchorLink, index) {
            var loadedSection = $(this);
            if (index == 1) {
                /* $('.selectedMenu').remove(); */
                $('#contactNav').removeClass('nav-itemActive');
                $('#featuresNav').removeClass('nav-itemActive');
                $('#pricingNav').removeClass('nav-itemActive');
                $('#homeNav').addClass('nav-itemActive');
                /* $(".navbar-brand").after(" <ul class=\"navbar-nav\"><li class=\"nav-item active selectedMenu animated fadeInRight\"> <a class=\"nav-link\" href=\"#\">" + "Home" + "<span class=\"sr-only\">(current)<\/span><\/a> <\/li><\/ul> "); */
            }
            if (index == 2) {
                /* $('.selectedMenu').remove();*/
                $('#contactNav').removeClass('nav-itemActive');
                $('#homeNav').removeClass('nav-itemActive');
                $('#pricingNav').removeClass('nav-itemActive');
                $('#featuresNav').addClass('nav-itemActive');
                /* $(".navbar-brand").after(" <ul class=\"navbar-nav\"><li class=\"nav-item active selectedMenu animated fadeInRight\"> <a class=\"nav-link\" href=\"#\">" + "Features" + "<span class=\"sr-only\">(current)<\/span><\/a> <\/li><\/ul> ");*/
            }
        }
    });
    /*click to reach anywhere in the page using #moveto callBack -> fullPage.js*/
    $(document).on('click', '#moveToHome', function () {
        $('.selectedMenu').remove();
        $.fn.fullpage.moveTo(1);
        $(".navbar-toggler").click();
    });
    $(document).on('click', '#moveToFeatures', function () {
        $('.selectedMenu').remove();
        $.fn.fullpage.moveTo(2);
        $(".navbar-toggler").click();
    });

    $(document).scroll(function () {
        alert("sdfj");
    });

});

Answer 1

默认情况下，fullPage.js 不使用 JS 滚动事件，而是使用 CSS3 转换在部分和幻灯片中滚动。

您可以使用 onLeave and afterLoad 插件回调。喜欢 this.

或者您可以使用此选项初始化插件：

scrollBar: true

...您将可以自由使用自定义 JS 滚动事件。

Answer 2

正如@CLMVL 所说fullPage.js 默认情况下不会触发滚动事件。

您会在 fullPage.js Frecuently Answered Questions 中找到问题的答案。更具体地在问题 jQuery scroll event doesn't work

fullPage.js 不触发滚动事件

scroll event doesn't firing with fullPage.js

html

javascript

jquery

fullpage.js