Preserving Scroll State on Tab Change in Angular

While developing a multi-tab Angular application, I encountered a challenge - how to maintain scrolling when the user switches between tabs. This feature is essential to enhance the user experience, ensuring that users can continue where they left off when navigating between tabs.

In this blog post, I will show you step by step how to add this functionality to your project. This is a simple yet effective way to maintain the scroll position of individual tabs.

Question

By default, switching between tabs will usually reload the content, thus resetting the scroll position. This behavior can be frustrating for users, especially when browsing long lists or data-intensive pages. To solve this problem we need:

1. Save the scroll position of the current tab before switching.
2. Restore scroll position when user returns to tab.

Solution

We can use window.scrollY to capture the current vertical scroll position and save it in a state object. When the user navigates back to the tab, we retrieve and restore the saved location.

Here’s how to do it step by step:

1. Set scrolling state management

Create a property to track the scroll position of each label.

<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. Connect tags to logic

In your template, bind the onTabChange method to the tag selection event.

<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. Optional enhancements

• Debounce:Debounce prevents multiple save operations in a short period of time, reducing performance overhead and ensuring consistent behavior if the user switches tabs quickly.
• Horizontal scrolling: Use window.scrollX to preserve horizontal scrolling.

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

Conclusion

By effectively managing scroll position, you can greatly improve the user experience of your Angular application. This solution is simple, lightweight, and easily scalable to more complex scenarios.

Have you implemented a similar scroll management technique? Please share your insights and improvements in the comments below!
Happy coding! ?

The above is the detailed content of Preserving Scroll State on Tab Change in Angular. For more information, please follow other related articles on the PHP Chinese website!