diff --git a/projects/ngx-page-scroll-core/src/lib/page-scroll-instance.ts b/projects/ngx-page-scroll-core/src/lib/page-scroll-instance.ts index 360669fa..ce242d55 100644 --- a/projects/ngx-page-scroll-core/src/lib/page-scroll-instance.ts +++ b/projects/ngx-page-scroll-core/src/lib/page-scroll-instance.ts @@ -80,9 +80,10 @@ export class PageScrollInstance { /* Whether an interrupt listener is attached to the body or not */ public interruptListenersAttached = false; - /* References to the timer instance that is used to perform the scroll animation to be + /* Value of the requestAnimationFrameId that is used to perform the scroll animation to be able to clear it on animation end*/ - public timer: any = null; + + public requestFrameId: number | null = null; /** * Private constructor, requires the properties assumed to be the bare minimum. diff --git a/projects/ngx-page-scroll-core/src/lib/providers/config.provider.ts b/projects/ngx-page-scroll-core/src/lib/providers/config.provider.ts index dfae9722..bec313d5 100644 --- a/projects/ngx-page-scroll-core/src/lib/providers/config.provider.ts +++ b/projects/ngx-page-scroll-core/src/lib/providers/config.provider.ts @@ -4,7 +4,6 @@ import { PageScrollConfig } from '../types/page-scroll.config'; export const NGXPS_CONFIG = new InjectionToken('ngxps_config'); export const defaultPageScrollConfig: PageScrollConfig = { - _interval: 10, _minScrollDistance: 2, _logLevel: 1, namespace: 'default', diff --git a/projects/ngx-page-scroll-core/src/lib/providers/ngx-page-scroll.service.ts b/projects/ngx-page-scroll-core/src/lib/providers/ngx-page-scroll.service.ts index b0e87fab..2ee4dba0 100644 --- a/projects/ngx-page-scroll-core/src/lib/providers/ngx-page-scroll.service.ts +++ b/projects/ngx-page-scroll-core/src/lib/providers/ngx-page-scroll.service.ts @@ -54,11 +54,11 @@ export class PageScrollService { pageScrollInstance.detachInterruptListeners(); } - if (pageScrollInstance.timer) { + if (pageScrollInstance.requestFrameId) { // Clear/Stop the timer - clearInterval(pageScrollInstance.timer); + pageScrollInstance.pageScrollOptions.document.defaultView.cancelAnimationFrame(pageScrollInstance.requestFrameId) // Clear the reference to this timer - pageScrollInstance.timer = undefined; + pageScrollInstance.requestFrameId = null; pageScrollInstance.fireEvent(!interrupted); return true; @@ -157,17 +157,9 @@ export class PageScrollService { Math.abs(pageScrollInstance.distanceToScroll) / pageScrollInstance.pageScrollOptions.speed * 1000; } - // We should go there directly, as our "animation" would have one big step - // only anyway and this way we save the interval stuff - const tooShortInterval = pageScrollInstance.executionDuration <= pageScrollInstance.pageScrollOptions._interval; - - if (allReadyAtDestination || tooShortInterval) { + if (allReadyAtDestination) { if (this.config._logLevel >= 2 || (this.config._logLevel >= 1 && isDevMode())) { - if (allReadyAtDestination) { - console.log('Scrolling not possible, as we can\'t get any closer to the destination'); - } else { - console.log('Scroll duration shorter that interval length, jumping to target'); - } + console.log('Scrolling not possible, as we can\'t get any closer to the destination'); } pageScrollInstance.setScrollPosition(pageScrollInstance.targetScrollPosition); pageScrollInstance.fireEvent(true); @@ -198,7 +190,14 @@ export class PageScrollService { // .. and calculate the end time (when we need to finish at last) pageScrollInstance.endTime = pageScrollInstance.startTime + pageScrollInstance.executionDuration; - pageScrollInstance.timer = setInterval((instance: PageScrollInstance) => { + pageScrollInstance.requestFrameId = pageScrollInstance.pageScrollOptions.document.defaultView.requestAnimationFrame(this.updateScrollPostion(pageScrollInstance)); + + // Register the instance as running one + this.runningInstances.push(pageScrollInstance); + } + + public updateScrollPostion(instance: PageScrollInstance){ + return ()=>{ // Take the current time const currentTime: number = new Date().getTime(); @@ -231,12 +230,10 @@ export class PageScrollService { // (otherwise the event might arrive at "too early") if (stopNow) { this.stopInternal(false, instance); + } else{ + instance.pageScrollOptions.document.defaultView.requestAnimationFrame(this.updateScrollPostion(instance)) } - - }, this.config._interval, pageScrollInstance); - - // Register the instance as running one - this.runningInstances.push(pageScrollInstance); + } } public scroll(options: PageScrollOptions): void { diff --git a/projects/ngx-page-scroll-core/src/lib/types/page-scroll.config.ts b/projects/ngx-page-scroll-core/src/lib/types/page-scroll.config.ts index 95be4097..99c9bff1 100644 --- a/projects/ngx-page-scroll-core/src/lib/types/page-scroll.config.ts +++ b/projects/ngx-page-scroll-core/src/lib/types/page-scroll.config.ts @@ -2,12 +2,6 @@ import { EasingLogic } from './easing-logic'; export interface PageScrollConfig { - /** - * The number of milliseconds to wait till updating the scroll position again. - * Small amounts may produce smoother animations but require more processing power. - */ - _interval?: number; - /** * The amount of pixels that need to be between the current scrollTop/scrollLeft position * and the target position the cause a scroll animation. In case distance is below