移动滚动不适用于 fullpage.js 和 wow.js

Question

我正在使用 fullpage.js 创建我的网站，我正在尝试合并 wow.js 和 animate.css 来创建一些很酷的动画。在桌面上一切正常，但是当我将浏览器调整为移动尺寸时，我根本无法滚动。页面顶部的动画已加载，但在调整到更大的视口之前我根本无法滚动。

我试过 'scrollOverflow: true' 全页，但它不起作用。

这是我的 app.js 的样子：

$(document).ready(function() {

wow = new WOW(
    {
        boxClass:     'wow',      // default
        animateClass: 'animated', // default
        offset:       0,          // default
        mobile:       false,      
        live:         true        // default
    }
)
wow.init();

$('#fullpage').fullpage({
    navigation: true,
    navigationPosition: 'left',
    navigationTooltips: ['Home', 'About Me', 'Skills', 'Portfolio', 'Contact', 'Hire Me'],
    resize: false,
    scrollBar: true,
    scrollOverflow: false,

    //RESPONSIVE
    responsiveWidth: 800,
    afterResize: function () {
        if ($(window).width() < 800) {
            //$.fn.fullpage.setAutoScrolling(false);
            var verticalNav = document.getElementById("fp-nav");
            $(verticalNav).hide();
        }
    }
});
});

Answer 1

I've tried the 'scrollOverflow: true' on fullpage, but it's not working.

而且...您为什么要使用它？它的用途与您的问题无关...所以您应该将其关闭...

Answer 2

我找到问题了....

我的 html 和 CSS 身上都有 overflow: hidden !important。把它们取下来，它们现在都可以工作了。

感谢阿尔瓦罗的帮助！

Answer 3

他们工作

我正在使用 FullPage.js、scrollOverflow 和 WOW 动画，它们工作得很好。

这是我的设置

在 HEAD ELEMENT 中我有这些链接

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.2/jquery.fullPage.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />

在结束 BODY 标签之前的底部，我有所有这些脚本。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.2/vendors/scrolloverflow.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.2/jquery.fullPage.min.js"></script>

<script>
    /*** Call function after page has loaded ***/
    $(document).ready(function() {

        /*** Call FullPage.js option ***/
        pageScroll();

        new WOW().init();
        $(window).resize(function() {
            pageScroll();
        });
    });

    /*** FullPage.js Function ***/
    function pageScroll(){
        $('#fullpage').fullpage({
            sectionsColor: ['#06C', '#C06', '#930', '#06C'],
            anchors: ['aa', 'bb', 'cc', 'dd'],
            menu: '.menu',
            navigation: true,
            scrollOverflow: true,
            scrollBar:true,
            fixedElements: '.header',
            paddingTop: '3em',
            slidesNavigation: true,
            paddingBottom: '1em'
        });
    }
</script>

这是一个正在运行的网站。

https://cleansites.us/

移动滚动不适用于 fullpage.js 和 wow.js

mobile scroll not working with fullpage.js and wow.js

javascript

jquery

animate.css

fullpage.js

wow.js