- Auto building scrollOverflow when changes detected inside sections/…

…slides
alvarotrigo · Jun 30, 2021 · 116bd81 · 116bd81 · fathizadeh25663 · Feb 19, 2022
1 parent 7e2c7e2
commit 116bd81
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 3 deletions.
diff --git a/src/fullpage.js b/src/fullpage.js
@@ -2670,7 +2670,7 @@
         }
 
         /**
-         * Detects changes on sections and fires reBuild
+         * Listen to changes on sections and fires reBuild
          * when those changes affect the section height.
          */
         function onSectionChange(mutations){

diff --git a/vendors/scrolloverflow.js b/vendors/scrolloverflow.js
@@ -1,5 +1,5 @@
 /*!
-* Scrolloverflow 2.0.6 module for fullPage.js >= 3
+* Scrolloverflow 2.0.7 module for fullPage.js >= 3
 * https://github.com/alvarotrigo/fullPage.js
 */
 /**
@@ -2143,7 +2143,7 @@ if ( typeof module != 'undefined' && module.exports ) {
 
 
 /*!
-* Scrolloverflow 2.0.6 module for fullPage.js >= 3
+* Scrolloverflow 2.0.7 module for fullPage.js >= 3
 * https://github.com/alvarotrigo/fullPage.js
 * @license MIT licensed
 *
@@ -2224,16 +2224,32 @@ if ( typeof module != 'undefined' && module.exports ) {
                 if(document.readyState === 'complete'){
                     createScrollBarForAll();
                     fullpage_api.shared.afterRenderActions();
+                    bindEvents();
                 }
                 //after DOM and images are loaded
                 window.addEventListener('load', function(){
                     createScrollBarForAll();
                     fullpage_api.shared.afterRenderActions();
+                    bindEvents();
                 });
 
+
                 return self;
             };
 
+            function bindEvents(){
+
+                // Adds observer to fp-scroller elements
+                $('.fp-scroller').forEach(function(fpScroller){
+                    new MutationObserver(onFpScrollerChange).observe(fpScroller, {
+                        attributes: true,
+                        subtree:true,
+                        childList: true,
+                        characterData: true
+                    });
+                });
+            }
+
             /**
             * Creates the scrollbar for the sections and slides in the site
             */
@@ -2337,9 +2353,22 @@ if ( typeof module != 'undefined' && module.exports ) {
                 }
             }
 
+            /**
+             * Triggered when fp-scroller wrapper content changes.
+             * and reBuilds the scrollbar.
+             */
+            function onFpScrollerChange(mutations){
+                mutations.forEach(function(mutation) {
+                    var slide = fp_utils.closest(mutation.target, SLIDE_SEL);
+                    var sectionOrSlide = slide ? slide : fp_utils.closest(mutation.target, SECTION_SEL);
+                    createScrollBar(sectionOrSlide);
+                });
+            }
+
             //public functions
             self.createScrollBarForAll = createScrollBarForAll;
             self.createScrollBar = createScrollBar;
+            self.onFpScrollerChange = onFpScrollerChange;
         }
 
         /**