- Fixed bug: continuousVerticall not working with fp-auto-height sections #4708

Author: alvarotrigo

src/js/infiniteScroll/createInfiniteSections.js

@@ -8,7 +8,7 @@ import {
     SLIDE_ACTIVE_SEL
 } from '../common/selectors.js';
 import { getYmovement } from '../common/utilsFP.js';
-
+import { getDestinationPosForInfiniteScroll, getTmpPosition } from './getPositions.js';
 
 /**
 * Adds sections before or after the current one to create the infinite effect.
@@ -20,15 +20,16 @@ export function createInfiniteSections(v){
     // Scrolling down
     if (!v.isMovementUp) {
         // Move all previous sections to after the active section
-        utils.after(activeSectionItem, utils.prevAll(activeSectionItem, SECTION_SEL).reverse());
+        var prevSectionsReversed = utils.prevAll(activeSectionItem, SECTION_SEL).reverse();
+        utils.after(activeSectionItem, prevSectionsReversed[0]);
     }
     else { // Scrolling up
         // Move all next sections to before the active section
         utils.before(activeSectionItem, utils.nextAll(activeSectionItem, SECTION_SEL));
     }
 
     // Maintain the displayed position (now that we changed the element order)
-    silentScroll(getState().activeSection.item.offsetTop);
+    silentScroll(getTmpPosition(v));
 
     // Maintain the active slides visible in the viewport
     keepSlidesPosition();
@@ -37,7 +38,7 @@ export function createInfiniteSections(v){
     v.wrapAroundElements = activeSectionItem;
 
     // Recalculate animation variables
-    v.dtop = v.element.offsetTop;
+    v.dtop = getDestinationPosForInfiniteScroll(v);
     v.yMovement = getYmovement(getState().activeSection, v.element);
 
     return v;
@@ -54,4 +55,3 @@ function keepSlidesPosition(){
     }
 }
 
-

src/js/infiniteScroll/fixPosition.js

@@ -7,6 +7,7 @@ import {
     SECTION_SEL,
     SLIDE_ACTIVE_SEL
 } from '../common/selectors.js';
+import { getTmpPosition } from './getPositions.js';
 
 /**
 * Maintains the active slides in the viewport
@@ -33,10 +34,10 @@ export function continuousVerticalFixSectionOrder (v) {
         utils.before(utils.$(SECTION_SEL)[0], v.wrapAroundElements);
     }
     else {
-        utils.after(utils.$(SECTION_SEL)[getState().sections.length -1 ], v.wrapAroundElements);
+        utils.after(utils.$(SECTION_SEL)[getState().sections.length - 1], utils.prevAll(v.element, SECTION_SEL).reverse());
     }
 
-    silentScroll(getState().activeSection.item.offsetTop);
+    silentScroll(getTmpPosition(v));
 
     // Maintain the active slides visible in the viewport
     keepSlidesPosition();

src/js/infiniteScroll/getPositions.js

@@ -0,0 +1,19 @@
+import * as utils from '../common/utils.js';
+import { getState } from "../common/state.js";
+import { getDestinationPosition } from "../scroll/scrollPage.js";
+import { AUTO_HEIGHT } from '../common/selectors.js';
+
+export function getTmpPosition(v){
+    return utils.hasClass(getState().activeSection.item, AUTO_HEIGHT) 
+        ? getDestinationPosition(getState().activeSection.item) 
+        : getState().activeSection.item.offsetTop;
+}
+
+export function getDestinationPosForInfiniteScroll(v){
+    // forcing the scroll to the bottom of the fp-auto-height section when scrolling up
+    if(v.isMovementUp && utils.hasClass(v.element, AUTO_HEIGHT)){
+        return getDestinationPosition(v.element) - utils.getWindowHeight() + v.element.offsetHeight;
+    }
+    
+    return v.element.offsetTop;
+}

src/js/scroll/scrollPage.js

@@ -151,7 +151,7 @@ function onDestroy(){
 * Returns the destination Y position based on the scrolling direction and
 * the height of the section.
 */
-function getDestinationPosition(element){
+export function getDestinationPosition(element){
     var elementHeight = element.offsetHeight;
     var elementTop = element.offsetTop;