Préserver l'état de défilement lors du changement d'onglet dans Angular

Lors du développement d'une application Angular multi-onglets, j'ai rencontré un défi : comment maintenir le défilement lorsque l'utilisateur bascule entre les onglets. Cette fonctionnalité est essentielle pour améliorer l'expérience utilisateur, garantissant que les utilisateurs peuvent continuer là où ils s'étaient arrêtés lors de la navigation entre les onglets.

Dans cet article de blog, je vais vous montrer étape par étape comment ajouter cette fonctionnalité à votre projet. Il s'agit d'un moyen simple mais efficace de conserver la position de défilement des onglets individuels.

Question

Par défaut, basculer entre les onglets rechargera généralement le contenu, réinitialisant ainsi la position de défilement. Ce comportement peut être frustrant pour les utilisateurs, en particulier lorsqu'ils parcourent de longues listes ou des pages gourmandes en données. Pour résoudre ce problème, nous avons besoin de :

1. Enregistrez la position de défilement de l'onglet actuel avant de changer.
2. Restaurez la position de défilement lorsque l'utilisateur revient à l'onglet.

Solution

Nous pouvons utiliser window.scrollY pour capturer la position actuelle du défilement vertical et la sauvegarder dans un objet d'état. Lorsque l'utilisateur revient à l'onglet, nous récupérons et restaurons l'emplacement enregistré.

Voici comment procéder étape par étape :

1. Définir la gestion de l'état de défilement

Créez une propriété pour suivre la position de défilement de chaque étiquette.

<code class="language-typescript">export class TabComponent {
  activeTab: string = 'tab1';
  tabScrollStates: { [key: string]: number } = {};

  onTabChange(newTab: string): void {
    // 保存活动标签的当前滚动位置
    this.tabScrollStates[this.activeTab] = window.scrollY || 0;

    // 更新活动标签
    this.activeTab = newTab;

    // 恢复新标签的滚动位置
    const savedScrollPosition = this.tabScrollStates[newTab] || 0;
    // 延迟滚动恢复以确保DOM已更新为新的标签内容
    setTimeout(() => {
      window.scrollTo(0, savedScrollPosition);
    }, 0);
  }
}</code>

2. Connectez les balises à la logique

Dans votre modèle, liez la méthode onTabChange à l'événement de sélection de balise.

<code class="language-html"><div>
  <button (click)="onTabChange('tab1')">Tab 1</button>
  <button (click)="onTabChange('tab2')">Tab 2</button>
</div>

<div *ngIf="activeTab === 'tab1'">
  <p>Tab 1 的内容 (这里可以有很多内容)</p>
</div>

<div *ngIf="activeTab === 'tab2'">
  <p>Tab 2 的内容 (这里也可以有很多内容)</p>
</div></code>

3. Améliorations facultatives

• Debounce :Debounce empêche plusieurs opérations de sauvegarde sur une courte période de temps, réduisant ainsi la surcharge de performances et garantissant un comportement cohérent si l'utilisateur change d'onglet rapidement.
• Défilement horizontal : Utilisez window.scrollX pour conserver le défilement horizontal.

<code class="language-typescript">const savedHorizontalScroll = window.scrollX || 0;
setTimeout(() => {
  window.scrollTo(savedHorizontalScroll, savedScrollPosition);
}, 0);</code>

Conclusion

En gérant efficacement la position de défilement, vous pouvez grandement améliorer l'expérience utilisateur de votre application Angular. Cette solution est simple, légère et facilement évolutive vers des scénarios plus complexes.

Avez-vous mis en place une technique de gestion de défilement similaire ? Veuillez partager vos idées et vos améliorations dans les commentaires ci-dessous !
Bon codage ! ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!