CODEWITHSUNDEEP
jqueryiphonescrollfullpage.js
Skymone
Skymone

Reputation: 13

Fullpage.js not scrolling on phone

I have installed the jQuery plugin fullpage.js on a webpage I am working on, and it works fine on my computer, but the content on the 2nd section of the page is too large to fit on my phone's screen, and should be scrolling - but I cannot figure out how to do this. I won't pretend I know much about javascript, so I'm a bit at a loss, and the solution might be something simple. Thanks in advance for any help!

Webpage in question: http://romowind.com/testside/ - it's the front page.

Upvotes: 1

Views: 4788

Answers (1)

Alvaro
Alvaro

Reputation: 41595

You have to make use of the option scrollOverflow setting it to true and add the dependency jquery.slimscroll.min.js before you load the jquery.fullpage.js file as specified at the documentation.

The javascript jquery.slimscroll.min.js is located in the vendors folder once you download the plugin.

Make sure to use the last version of fullpage.js.

Your included files should be 4 (2 jquery libraries + fullpage js file + fullpage css file + slimscroll ) Something like:

<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>    

<script type="text/javascript" src="vendors/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="jquery.fullPage.js"></script>

Then, your initialization should look like this:

$(document).ready(function () {
    $.fn.fullpage({
        slidesColor: ['#fff', '#fff', '#fff', '#fff', '#fff'],
        anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
        scrollOverflow: true
    });
});

Upvotes: 1

Related Questions