javascriptscrolltouchfullpage.js

Scrolling inside slides with fullpage.js and slim scroll.js


I activated the option scrollOverflow: true, in Fullpage.js. And added the slim scroll plugin. It is important to scroll longer content on mobile devices. When I try to scroll on a mobile phone, it just scrolls directly to the other section? I tested the example made by Alvaro on a phone and that does work amazing. It scrolls the content and at the end it goes over to the next section.

What am I doing wrong? Website under construction

EDIT I found where the problem was. The container I used to put the content in was to long for most mobile screens, but not long enough to have a long scrollable container. So near to the end of the content it swiped to the next section. I had no js errors so I couldn't understand wat was going wrong. I added a padding at the bottom of the container which makes it longer and gives the wanted effect.

Better options welcome


Solution

  • fullPage.js stopped using slimScroll.js a long time ago. Now it uses a forked version of iScroll that solves some bugs in it. You can find it in the vendors folder as stated in the docs:

    scrollOverflow: (default false) defines whether or not to create a scroll for the section/slide in case its content is bigger than the height of it. When set to true, your content will be wrapped by the plugin. Consider using delegation or load your other scripts in the afterRender callback. In case of setting it to true, it requires the vendor library scrolloverflow.min.js and it should be loaded before the fullPage.js plugin. For example:

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