CODEWITHSUNDEEP
javascriptjqueryfullpage.jsanimate.csswow.js
mattyfew
mattyfew

Reputation: 163

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

I'm using fullpage.js to create my website, and I'm trying to incorporate wow.js and animate.css to create some cool animations. Everything is working fine on desktop, but when I resize the browser to mobile-size, I cannot scroll at all. The animations at the top of my page load, but I cannot scroll at all until I resize to a bigger viewport.

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

This is what my app.js looks like:

$(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();
        }
    }
});
});

Upvotes: 2

Views: 1590

Answers (3)

lupoll88
lupoll88

Reputation: 159

THEY WORK

I am using FullPage.js, scrollOverflow and WOW Animations altogether and they work perfectly fine.

HERE ARE MY SETTINGS

In the HEAD ELEMENT I have these Links

<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" />

And at the bottom before the ending BODY tag I have all these scripts.

<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>

Here is a live working site.

https://cleansites.us/

Upvotes: 0

mattyfew
mattyfew

Reputation: 163

I figured out the problem....

I had overflow: hidden !important on both my html and body in my CSS. Took them off and they both work now.

Thanks for the help Alvaro!

Upvotes: 0

Alvaro
Alvaro

Reputation: 41595

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

And... why are you using it? The purpose of it has nothing to do with your problem... so you should turn it off...

Upvotes: 0

Related Questions