2

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

3 回答 3

0

他们工作

我正在使用 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/

于 2017-03-31T08:16:37.000 回答
0

我解决了这个问题....

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

感谢阿尔瓦罗的帮助！

于 2015-11-26T16:54:47.490 回答
0

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

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

于 2015-11-26T12:52:59.290 回答