Question

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

我已经尝试了'scrollOverflow：true＆＃39;在整页上，但它不起作用。

这就是我的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

我在整页上尝试了'scrollOverflow：true'，但它无效。

而且......你为什么要用它？它的目的与你的问题无关......所以你应该把它关掉......

Answer 2

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

我的CSS中的html和body都有overflow: hidden !important。把它们拿走，它们现在都在工作。

感谢Alvaro的帮助！

Answer 3

他们的工作

我正在使用FullPage.js，scrollOverflow和WOW Animations，它们完美无缺。

这是我的设置

在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

3 个答案: