From 41f47523c15dd23039924d9ea5b35f6082ee94b9 Mon Sep 17 00:00:00 2001 From: Aleksei Krivo Date: Wed, 26 Apr 2023 18:18:17 +0500 Subject: [PATCH] Fixed bug: #4480 scrolling up jumpy behaviour --- .../beyondFullpage/beyondFullPageHandler.js | 74 +++++-------------- 1 file changed, 17 insertions(+), 57 deletions(-) diff --git a/src/js/beyondFullpage/beyondFullPageHandler.js b/src/js/beyondFullpage/beyondFullPageHandler.js index 6174840d0..96d3dcabe 100644 --- a/src/js/beyondFullpage/beyondFullPageHandler.js +++ b/src/js/beyondFullpage/beyondFullPageHandler.js @@ -1,75 +1,35 @@ import * as utils from '../common/utils.js'; -import { getState, setState } from "../common/state.js"; +import { getState } from "../common/state.js"; import { setPrevTime } from '../common/tick.js'; import { wheelDataHandler } from './wheelDataHandler.js'; -import { getScrollSettings } from '../common/utilsFP.js'; import { scrollUpToFullpage } from './scrollBeyondFullPage.js'; export function beyondFullPageHandler(container, e){ var curTime = new Date().getTime(); - var pauseScroll = getState().isBeyondFullpage && container.getBoundingClientRect().bottom >= 0 && wheelDataHandler.getDirection() === 'up'; var g_isAboutToScrollToFullPage = getState().isAboutToScrollToFullPage; + // Register the event and get current mousewheel scrolling direction + wheelDataHandler.registerEvent(e); + var scrollWheelDirection = wheelDataHandler.getDirection(); - if(g_isAboutToScrollToFullPage){ + if (g_isAboutToScrollToFullPage) { setPrevTime(curTime); utils.preventDefault(e); return false; } - if(getState().isBeyondFullpage){ - if(!pauseScroll){ - keyframeTime('set', 'beyondFullpage', 1000); + if (getState().isBeyondFullpage) { + // If user is beyound the fullpage, let's check fullpage container position. + // The scrolling direction we already got by "getDirection". + var containerBounding = container.getBoundingClientRect(); + if (containerBounding.bottom >= 0 && scrollWheelDirection === 'up') { + // move to the fullpage container only if user scrolls up and fullpage container is in the viewport + scrollUpToFullpage(); + utils.preventDefault(e); + return false; } - else { - var shouldSetFixedPosition = !g_isAboutToScrollToFullPage && (!keyframeTime('isNewKeyframe', 'beyondFullpage') || !wheelDataHandler.isAccelerating() ); - var scrollSettings; - if( shouldSetFixedPosition ){ - scrollSettings = getScrollSettings(utils.getLast(getState().sections).item.offsetTop + utils.getLast(getState().sections).item.offsetHeight); - scrollSettings.element.scrollTo(0, scrollSettings.options); - setState({isAboutToScrollToFullPage: false}); - - utils.preventDefault(e); - return false; - } - else if( wheelDataHandler.isAccelerating() ){ - pauseScroll = false; - setState({isAboutToScrollToFullPage: true}); - setState({scrollTrigger: 'wheel'}); - - scrollUpToFullpage(); - - utils.preventDefault(e); - return false; - } - } - - if(!g_isAboutToScrollToFullPage){ - + if (!g_isAboutToScrollToFullPage) { // allow normal scrolling, but quitting - if(!pauseScroll){ - return true; - } + return true; } } -} - -var keyframeTime = (function(){ - let isNew = false; - var frames = {}; - var timeframes = {}; - - return function(action, name, timeframe){ - switch(action){ - case 'set': - frames[name] = new Date().getTime(); - timeframes[name] = timeframe; - break; - case 'isNewKeyframe': - const current = new Date().getTime(); - isNew = current - frames[name] > timeframes[name]; - break; - } - - return isNew; - }; -})(); \ No newline at end of file +} \ No newline at end of file