Streaming live at 10am (PST)

CMS + fullpage.js not fully working correctly


#1

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