添加responsiveWidth时，Fullpage.js无法正常工作

Question

我有一个包含三个部分的fullpage.js实现，它在桌面上运行良好。 当屏幕超过600px时，我禁用了fullpage.js。我按照文档

中的建议这样做

responsiveWidth: 600

但是当我现在滚动时，会出现一些故障 1.向下滚动到一个部分，它会自动将屏幕的一半向上滚动到上一部分。 2.我无法滚动到最后一部分，如果我滚动，在一秒钟之内，第二部分会出现。

这是我的代码。

JS

$('#fullpage').fullpage({
        sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke']
            /*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();
                $(".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();
                $(".navbar-brand").after(" <ul class=\"navbar-nav\"><li class=\"nav-item active selectedMenu animated fadeInRight\"> <a class=\"nav-link\" href=\"#\">" + "Products" + "<span class=\"sr-only\">(current)<\/span><\/a> <\/li><\/ul> ");
            }
            if (index == 3) {
                $('.selectedMenu').remove();
                $(".navbar-brand").after(" <ul class=\"navbar-nav\"><li class=\"nav-item active selectedMenu animated fadeInRight\"> <a class=\"nav-link\" href=\"#\">" + "Contact" + "<span class=\"sr-only\">(current)<\/span><\/a> <\/li><\/ul> ");
            }
        }
        , responsiveWidth: 600
    });
    /*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', '#moveToProducts', function () {
        $('.selectedMenu').remove();
        $.fn.fullpage.moveTo(2);
        $(".navbar-toggler").click();
    });
    $(document).on('click', '#moveToContact', function () {
        $('.selectedMenu').remove();
        $.fn.fullpage.moveTo(3);
        $(".navbar-toggler").click();
    });
    $(".navbar-toggler").click(function () {
        $('.selectedMenu').remove();
        $(this).toggleClass('active');
    });

HTML

<div id="fullpage">
    <div class="section homeClass" id="home">
        <div class="container-fluid">
            <div class="row"></div>
        </div>
    </div>
    <div class="section productsClass" id="products">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 col-sm-6 col-md-4 left">.col-12 .col-sm-6 .col-md-8</div>
                <div class="col-6 col-sm-6 col-md-4 middle">.col-6 .col-md-4</div>
                <div class="col-6 col-sm-6 col-md-4 right">.col-6 .col-md-4</div>
            </div>
        </div>
    </div>
    <div class="section contactClass" id="contact">
        <div class="container-fluid">
            <div class="row"></div>
        </div>
        <!--<div id="footer">Footer</div>-->
    </div>
</div>

我没有任何与fullpage.js相关的CSS，除此之外，

#products .fp-tableCell {
    vertical-align: top;
}