Fullpage - Scrollverhalten von Sections mit langem Content
Hier wird beschrieben, wie die Initialisierung der fullpage.js manipuliert werden sollte, um das Scrollverhalten zu langer Inhalte in den Sections zu steuern.
Manipulieren des Seiteninhalts für ScrollenOverflow
if(typeof wEditor == 'undefined'){
document.addEventListener('DOMContentLoaded', function waitUntilContentLoaded(){
if(!window.jQuery){
return setTimeout(waitUntilContentLoaded, 100);
}
var minWidthFullPage = jQuery('html').data('widthnavigationmainmenumax') ? jQuery('html').data('widthnavigationmainmenumax').replace(/px/, '') : 992;
jQuery('.elementSection').addClass('fp-auto-height-responsive');
jQuery('#blockContentInner').fullpage({
sectionSelector: '.elementSection', /*Angabe der section*/
verticalCentered: false,
css3: true,
lockAnchors: false,
navigation: false,
responsiveWidth: minWidthFullPage ,
autoScrolling: true,
/*Ausschalten des automatischen Scrollens; ACHTUNG: Das Element das hier angegeben wird,
wird normal gescrollt, je genauer der Selektor, desto besser*/
normalScrollElements: '.fp-scrolloverflow .sectionInner > .elementBox:first-child',
lazyLoading: false,
afterLoad: function(anchorLink, index){
jQuery('html').attr('data-section-selected', index);
jQuery(window).trigger('scroll');
},
afterResponsive: function(isResponsive){}
});
window.setTimeout(function(){
/*Ist das entsprechende Element > als die zur Verfügung stehende Höhe, dann wird der .elementSection die
CSS-Klasse fp-scrolloverflow gesetzt.
Auch hier gilt, je genauer das Element ausgewählt desto besser.
ZUSÄTZLICH: muss das overflow:scroll für das Element in den addional.scss (s. unten) abhängig von .object-fullpage deklariert werden.
*/
jQuery.each(jQuery('.sectionInner'), function(){
//console.log('sectionInner '+$(this).parent().attr('id')+' - Höhe: '+ this.firstChild.clientHeight);
//console.log($(this).parent().attr('id')+' Höhe: '+this.parentNode.clientHeight + " " + jQuery(this.parentNode).height());
if(this.firstChild.clientHeight > this.parentNode.clientHeight) jQuery(this.parentElement).addClass("fp-scrolloverflow");
});
}, 770);
}, false);
}
/*Auszug aus CSS*/
.object-fullpage {
.fp-section.fp-scrolloverflow .sectionInner {
height:100%;
max-height:100%;
& > .elementBox {
overflow-y: auto !important;
height: 100% !important;
padding-right: 1rem;
max-height:100%;
display:block;
}
}
}