Streaming live at 10am (PST)

CMS + fullpage.js not fully working correctly

Hi all,

I’m having an issue implementing fullpage.js in my CMS based site. It seems to work okayyyy, but for some reason, it’s not scrolling to the last dynamically loaded div. Also, it’s not scrolling passed the main section to the footer even though I have scrollOverflow:true

I’ve created two different pages to mess with different things:
radley-dev-sandbox.webflow.io/home-test
with the following code:

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.1/jquery.fullPage.js"></script>
<script> $(document).ready(function() {
	$('#fullpage').fullpage({
		//Navigation
		menu: '#menu',
		lockAnchors: false,
		navigation: false,
		navigationPosition: 'right',
		navigationTooltips: ['firstSlide', 'secondSlide'],
		showActiveTooltip: false,
		slidesNavigation: false,
		slidesNavPosition: 'bottom',

		//Scrolling
		css3: true,
		scrollingSpeed: 1200,
		autoScrolling: true,
		fitToSectionDelay: 0,
		scrollBar: true,
		easing: 'easeInOutCubic',
		easingcss3: 'ease',
		loopBottom: true,
		loopTop: false,
		loopHorizontal: true,
		continuousVertical: false,
		continuousHorizontal: false,
		scrollHorizontally: false,
		interlockedSlides: false,
		dragAndMove: false,
		offsetSections: false,
		resetSliders: false,
		fadingEffect: false,
		normalScrollElements: '#element1, .element2',
		scrollOverflow: false,
		scrollOverflowReset: false,
		scrollOverflowOptions: null,
		touchSensitivity: 15,
		normalScrollElementTouchThreshold: 5,
		bigSectionsDestination: null,

		//Accessibility
		keyboardScrolling: true,
		animateAnchor: true,
		recordHistory: true,

		//Design
		parallaxOptions: {type: 'reveal', percentage: 62, property: 'translate'},

		//Custom selectors
		sectionSelector: '.section',
		slideSelector: '.slide',

		lazyLoading: true,

		//events
		onLeave: function(index, nextIndex, direction){},
		afterLoad: function(anchorLink, index){},
		afterRender: function(){
        setInterval(function(){
             $.fn.fullpage.moveSectionDown();  
        }, 6000);
    },
		afterResize: function(){},
		afterResponsive: function(isResponsive){},
		afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
		onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
	});
});
    </script>



<script>
$(window).load(function() {
$('.loading').fadeOut();
});
</script>

<script type="text/javascript” src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/1937473ce0472ab28c1045fa4a1c6c4689c3603e/vendors/jquery.easings.min.js">
</script>

<script type="text/javascript” src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/vendors/scrolloverflow.min.js">
</script>

then there’s this page:
radley-dev-sandbox.webflow.io/home-test-base-code
with a very simplified version of the code:

<script type="text/javascript" src="https://cdn.rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
    <script>
    $(document).ready(function() {
    	$('#fullpage').fullpage({
      	css3: true,
    		scrollBar: true,
    		scrollOverflow: true,
    		paddingTop: '0px',
    		paddingBottom: '0px',

    		//events
    		onLeave: function(index, nextIndex, direction){},
    		afterLoad: function(anchorLink, index){},
    		afterRender: function(){},
    		afterResize: function(){},
    		afterResponsive: function(isResponsive){},
    		afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
    		onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
    	});
    });
    </script>

Here is my public share link: https://preview.webflow.com/preview/radley-dev-sandbox?preview=bb82aa9cde4041f1e4dc9d82c93604a4

1 Like

Hi!

Were you able to find the solution to this?

@istirton if you have the same problem, can you provide a URL we can check?
If you are adding sections / slides dynamically, then you will need to destroy and inititalise fullPage.js again.

If you are just updating the content of a section, you will have to call the reBuild method when you finish modifying the page.