如何在 Angular 中实现具有动态项目定位的可滚动类别栏（就像 Uber eats 滚动条）

Question

我正在开发一个 Angular 应用程序，该应用程序具有一个包含分类项目的页面。我想在页面顶部包含一个可滚动的类别栏，它显示所有可用的类别。当用户向下滚动页面时，我希望类别栏中项目的位置动态变化，突出显示与当前查看的内容相对应的类别。我怎样才能达到这种效果？

我尝试使用滚动条查看页面上的部分，但我无法更改垂直滚动条上的位置

代码如下： 组件类型 ``打字稿

import { Component, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'app-content',
  templateUrl: './content.component.html',
  styleUrls: ['./content.component.css']
})
export class ContentComponent {

  @ViewChild('pageContent') pageContent!: ElementRef;

  scrollToCategory(category: string) {
    const element = document.getElementById(category);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' });
    }
  }

  categories = ['Category 1', 'Category 2', 'Category 3','Category 4', 'Category 5', 'Category 6', 'Category 7','Category 8'];
  items : any = {
    'Category 1': ['Item 1', 'Item 2', 'Item 3'],
    'Category 2': ['Item 4', 'Item 5', 'Item 6'],
    'Category 3': ['Item 7', 'Item 8', 'Item 9'],
    'Category 4': ['Item 7', 'Item 8', 'Item 9'],
    'Category 5': ['Item 1', 'Item 2', 'Item 3'],
    'Category 6': ['Item 4', 'Item 5', 'Item 6'],
    'Category 7': ['Item 7', 'Item 8', 'Item 9'],
    'Category 8': ['Item 7', 'Item 8', 'Item 9'],
    'Category 9': ['Item 1', 'Item 2', 'Item 3'],
    'Category 10': ['Item 4', 'Item 5', 'Item 6'],
    'Category 11': ['Item 7', 'Item 8', 'Item 9'],
    'Category 12': ['Item 7', 'Item 8', 'Item 9'],
    'Category 13': ['Item 1', 'Item 2', 'Item 3'],
    'Category 14': ['Item 4', 'Item 5', 'Item 6'],
    'Category 15': ['Item 7', 'Item 8', 'Item 9'],
    'Category 16': ['Item 7', 'Item 8', 'Item 9'],
    'Category 17': ['Item 1', 'Item 2', 'Item 3'],
    'Category 18': ['Item 4', 'Item 5', 'Item 6'],
    'Category 19': ['Item 7', 'Item 8', 'Item 9'],
    'Category 20': ['Item 7', 'Item 8', 'Item 9'],
    
  };

HTML：

<div class="category-bar">
    <button *ngFor="let category of categories" (click)="scrollToCategory(category)">{{ category }}</button>
  </div>
  
  <div class="page-content">
    <div *ngFor="let category of categories" id="{{ category }}">
      <h2>{{ category }}</h2>
      <div>
      
      </div>
      <div *ngFor="let item of items[category]">{{ item }}</div>
    </div>
  </div>
  
      
    }

Answer 1

为了在标题中突出显示相应的类别，您需要在滚动视图中获取当前类别的边界。

在 .ts 中添加以下代码以检测当前滚动视图中的（类别的）子元素。

    ngAfterViewInit() {
    this.pageContent?.nativeElement.addEventListener('scroll', (e: any) => {
      this.onScroll(e);
    });
  }

  onScroll(event: any) {
    const childCatefories = [...event.target.children];
    for(let i=0; i< childCatefories.length; i++) {
      const cat = childCatefories[i];
      const rect: any = cat.getBoundingClientRect();
      const topShown = rect.top >= 0;
      const bottomShown = rect.bottom <= this.pageContent.nativeElement.scrollHeight;
      if(topShown && bottomShown) {
        this.highlightedCat = cat.firstChild.innerText;
        console.log(this.highlightedCat);
        break;
      }
    }
  }

您可以使用 ngClass 将活动类添加到突出显示的类别并为其添加一些样式。

    <div class="category-bar">
  <button [ngClass]="{'active': highlightedCat === category }" *ngFor="let category of categories" (click)="scrollToCategory(category)">{{ category }}</button>
</div>

<div class="page-content" #pageContent>
  <div class="category-info" *ngFor="let category of categories" id="{{ category }}">
    <h2>{{ category }}</h2>
    <div>
    
    </div>
    <div *ngFor="let item of items[category]">{{ item }}</div>
  </div>
</div>

下面的 css 将有助于更好的可视化（如果不需要，可以省略）。

.category-bar {
  height: 3rem;
}

button.active {
  background-color: green;
}

.page-content {
  height: calc(100vh - 6rem);
  position: relative;
  overflow: auto;
}

.page-content .category-info {
  height: 50vh;
}