diff --git a/aio/src/app/shared/scroll.service.spec.ts b/aio/src/app/shared/scroll.service.spec.ts index a27b500260aae..5b45d40986172 100644 --- a/aio/src/app/shared/scroll.service.spec.ts +++ b/aio/src/app/shared/scroll.service.spec.ts @@ -264,16 +264,14 @@ describe('ScrollService', () => { location.go('/initial-url2'); location.back(); - expect(scrollService.popStateFired).toBe(true); - expect(scrollService.scrollPosition).toEqual([2000, 0]); + expect(scrollService.poppedStateScrollPosition).toEqual([2000, 0]); expect(scrollService.needToFixScrollPosition()).toBe(true); } else { location.go('/initial-url1'); location.go('/initial-url2'); location.back(); - expect(scrollService.popStateFired).toBe(false); // popStateFired is always false - expect(scrollService.scrollPosition).toEqual([0, 0]); // scrollPosition always equals [0, 0] + expect(scrollService.poppedStateScrollPosition).toBe(null); expect(scrollService.needToFixScrollPosition()).toBe(false); } @@ -289,12 +287,10 @@ describe('ScrollService', () => { location.replaceState('/initial-url1', 'hack', {scrollPosition: [2000, 0]}); location.back(); - scrollService.popStateFired = false; - scrollService.scrollPosition = [0, 0]; + scrollService.poppedStateScrollPosition = [0, 0]; location.forward(); - expect(scrollService.popStateFired).toBe(true); - expect(scrollService.scrollPosition).toEqual([2000, 0]); + expect(scrollService.poppedStateScrollPosition).toEqual([2000, 0]); expect(scrollService.needToFixScrollPosition()).toBe(true); } else { location.go('/initial-url1'); @@ -302,8 +298,7 @@ describe('ScrollService', () => { location.back(); location.forward(); - expect(scrollService.popStateFired).toBe(false); // popStateFired is always false - expect(scrollService.scrollPosition).toEqual([0, 0]); // scrollPosition always equals [0, 0] + expect(scrollService.poppedStateScrollPosition).toBe(null); expect(scrollService.needToFixScrollPosition()).toBe(false); } diff --git a/aio/src/app/shared/scroll.service.ts b/aio/src/app/shared/scroll.service.ts index 2e319507d4983..4c0d8641410bf 100644 --- a/aio/src/app/shared/scroll.service.ts +++ b/aio/src/app/shared/scroll.service.ts @@ -19,11 +19,8 @@ export class ScrollService { private _topOffset: number | null; private _topOfPageElement: Element; - // Whether a `popstate` event has been fired (but the associated scroll position is not yet - // restored). - popStateFired = false; // The scroll position which has to be restored, after a `popstate` event. - scrollPosition: ScrollPosition = [0, 0]; + poppedStateScrollPosition: ScrollPosition | null = null; // Whether the browser supports the necessary features for manual scroll restoration. supportManualScrollRestoration: boolean = !!window && ('scrollTo' in window) && ('scrollX' in window) && ('scrollY' in window) && @@ -72,8 +69,7 @@ export class ScrollService { this.removeStoredScrollPosition(); // The `popstate` event is always triggered by a browser action such as clicking the // forward/back button. It can be followed by a `hashchange` event. - this.popStateFired = true; - this.scrollPosition = event.state ? event.state['scrollPosition'] : null; + this.poppedStateScrollPosition = event.state ? event.state.scrollPosition : null; } }); } @@ -160,8 +156,10 @@ export class ScrollService { } scrollToPosition() { - this.viewportScroller.scrollToPosition(this.scrollPosition); - this.popStateFired = false; + if (this.poppedStateScrollPosition) { + this.viewportScroller.scrollToPosition(this.poppedStateScrollPosition); + this.poppedStateScrollPosition = null; + } } /** @@ -191,7 +189,7 @@ export class ScrollService { * Check if the scroll position need to be manually fixed after popState event */ needToFixScrollPosition(): boolean { - return this.popStateFired && this.scrollPosition && this.supportManualScrollRestoration; + return this.supportManualScrollRestoration && !!this.poppedStateScrollPosition; } /**