Gestion du scroll avec withInMemoryScrolling

Imaginez que vous naviguez sur un site e-commerce. Vous faites défiler une longue liste de produits, vous cliquez sur un article qui vous intéresse, puis vous revenez en arrière. Frustrant, n'est-ce pas, de vous retrouver tout en haut de la page et de devoir refaire défiler pour retrouver où vous étiez ?

C'est exactement le problème que résout withInMemoryScrolling dans Angular. Cette fonctionnalité permet de mémoriser et restaurer automatiquement la position de défilement lors de la navigation, offrant une expérience utilisateur bien plus fluide.

Qu'est-ce que withInMemoryScrolling ?

withInMemoryScrolling() est une fonctionnalité du router Angular qui configure un système de mémorisation des positions de scroll. Introduite avec les applications standalone (Angular 15), elle stocke en mémoire la position de défilement pour chaque navigation et la restaure automatiquement.

Pensez-y comme à un marque-page intelligent qui se souvient exactement où vous étiez sur chaque page de votre application.

Configuration de base

Pour utiliser withInMemoryScrolling, vous devez l'ajouter lors de la configuration de votre router dans app.config.ts :

import { ApplicationConfig } from '@angular/core';
import { provideRouter, withInMemoryScrolling } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(
      routes,
      withInMemoryScrolling({
        scrollPositionRestoration: 'enabled',
        anchorScrolling: 'enabled'
      })
    )
  ]
};

Les options disponibles

scrollPositionRestoration

Cette option contrôle comment la position de scroll est restaurée :

• 'disabled' (par défaut) : Aucune restauration automatique
• 'top' : Toujours remonter en haut de la page
• 'enabled' : Restaurer la position précédente lors du retour arrière, sinon aller en haut

anchorScrolling

Cette option gère le défilement vers les ancres (fragments d'URL) :

• 'disabled' (par défaut) : Ignore les ancres dans l'URL
• 'enabled' : Fait défiler automatiquement vers l'élément avec l'ID correspondant

Conseil

Le mode 'enabled' pour scrollPositionRestoration deviendra probablement la valeur par défaut dans les futures versions d'Angular.

Pour une documentation avec navigation par ancres :

provideRouter(
  routes,
  withInMemoryScrolling({
    scrollPositionRestoration: 'enabled',
    anchorScrolling: 'enabled'
  })
)

Attention

Lors d'un retour arrière (bouton back), anchorScrolling ne s'exécute pas. La position sauvegardée est prioritaire, ce qui est généralement le comportement souhaité.

Gestion personnalisée du scroll

Pour des cas plus complexes, vous pouvez contrôler manuellement le scroll :

import { ViewportScroller } from '@angular/common';
import { inject } from '@angular/core';

export class CustomScrollComponent {
  private viewportScroller = inject(ViewportScroller);

  /**
   * Fait défiler vers une position spécifique
   * 
   * Utile pour des cas où la restauration automatique
   * ne suffit pas (contenu chargé dynamiquement)
   * 
   * @param x - Position horizontale
   * @param y - Position verticale
   * 
   * @example
   * ```typescript
   * this.scrollToPosition(0, 500);
   * ```
   */
  scrollToPosition(x: number, y: number): void {
    this.viewportScroller.scrollToPosition([x, y]);
  }

  /**
   * Fait défiler vers un élément spécifique
   * 
   * @param elementId - ID de l'élément cible
   * 
   * @example
   * ```typescript
   * this.scrollToElement('section-contact');
   * ```
   */
  scrollToElement(elementId: string): void {
    this.viewportScroller.scrollToAnchor(elementId);
  }
}

Points à surveiller

Chargement asynchrone

Si vos données se chargent de manière asynchrone, la restauration du scroll peut se déclencher avant que le contenu soit rendu. Dans ce cas, utilisez un resolver ou attendez que les données soient chargées avant de restaurer la position.

Headers fixes

Si vous avez un header fixe, combinez withInMemoryScrolling avec withRouterConfig pour ajuster l'offset :

provideRouter(
  routes,
  withInMemoryScrolling({ scrollPositionRestoration: 'enabled' }),
  withRouterConfig({ scrollOffset: [0, 100] })
)

Query parameters

Attention aux query parameters ! Si vous mettez à jour l'URL sans changer de composant (filtres par exemple), Angular considère cela comme une nouvelle navigation et peut remonter en haut. Utilisez ViewportScroller pour un contrôle manuel dans ces cas.