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

【问题标题】：mobile scroll not working with fullpage.js and wow.js移动滚动不适用于 fullpage.js 和 wow.js
【发布时间】：2015-11-26 05:19:39
【问题描述】：

我正在使用 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();
        }
    }
});
});

【问题讨论】：

标签： javascript jquery fullpage.js animate.css wow.js

【解决方案1】：

我在整页上尝试了“scrollOverflow: true”，但它不起作用。

还有……你为什么要使用它？它的目的与您的问题无关...所以您应该将其关闭...

【讨论】：

很公平。我只是在寻找发生这种情况的任何原因，但我不确定如何调试它。
您使用wow 的事实不应该假设移动设备上的fullpage.js 有任何问题。在没有哇的情况下尝试该站点并测试它是否可以正常工作。如果没有，那么你在 fullPage.js 上做错了什么。

【解决方案2】：

我发现了问题......

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

感谢阿尔瓦罗的帮助！

【讨论】：

【解决方案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/

【讨论】：