fix(openchallenges): customize scroll position restoration with different navigation types

[rrchai]

• fixes [Bug] Reset scrolling position when navigating to another page (Take 2) #2154

Changelogs

• Add a service to enable custom scroll position restoration. The built-in scrollPositionRestoration seems not to support the navigations when only parameters change. For example, in the search pages, the scroll position is always reset to "top" when filter values changes (if scrollPositionRestoration: 'top'. Therefore, adding a custom service could overwrite default scroll reset behavior and restore the previous position depending on different navigations:

  CustomScrollRestorationService: 
  A service for restoring scroll positions based on the method of navigation.
  It helps preserve the user's scroll position during various types of navigation actions.
  - Backward navigation: Scrolls to the previous position.
  - Forward navigation: Scrolls to the top of the page.
  - Anchor navigation: Scrolls to a specified anchor (no example currently).
  - Param navigation: Maintains the current scroll position when base url is the same, i.e. /challenge -> /challenge?status=active
  - Same url navigation (was not set before): Scrolls to the top of the page, i.e. /home -> /home
  

Preview

Backward navigation

Forward navigation

Same url navigation

Param navigation

[rrchai]

Some attempts using custom directive to prevent scroll position from being reset to 'top' is unsuccessful.

When navigate back from challenge-profile page to challenge-search page, the custom directive works to keep the previous scroll position. However, the scroll position will still be reset to 'top' when filters on the challenge-search page change.

Looking for other options...

[rrchai]

Update

It looks like scrollPositionRestoration: 'enabled' will overwrite the manual scrolls at least in ngOnit. Not sure if it's because of race issues. I am going to test window.scroll(0, 200) in different lifecycle hooks with scrollPositionRestoration: 'enabled'.

Results:

• ngOnit : ❌
• ngAfterContentInit: ❌
• ngAfterViewInit: ❌

The scroll position-y is not changed to 200 in all three lifecycle hooks until scrollPositionRestoration: 'enabled' is commented out.

Update 2

using viewportScroller.scrollToPosition will work with scrollPositionRestoration

[rrchai]

I initially use navigationTrigger === 'imperative' of NavigationStart to check if it's the same page navigation. However, the navigation of "home > challenge-search > home" is also an imperative trigger and it will remain the scroll position, which is unexpected.

Looking for options to store the previous url before navigation...

Update

Looking for options to store the previous url before navigation...

pairwise() can do the trick.

[tschaffter]

This looks like an elegant solution. I need to confirm that the use of window will not break SSR before approving this PR.

[rrchai]

I will explore the simpler solution @tschaffter suggested and convert this pr to draft.

[rrchai]

Closing this - the new approach to address the issue is tracked in #2273