Class AppComponent

examples/angular/smooth-scroll/src/app/app.component.ts:57–97

  `,
})
export class AppComponent {
  scrollElement = viewChild<ElementRef<HTMLDivElement>>('scrollElement')

  scrollingTime = signal(0)

  virtualizer = injectVirtualizer(() => ({
    scrollElement: this.scrollElement(),
    count: 10000,
    estimateSize: () => 35,
    overscan: 5,
    scrollToFn: (offset, options, instance) => {
      const duration = 1000
      const start = this.scrollElement()!.nativeElement.scrollTop
      const startTime = Date.now()
      this.scrollingTime.set(startTime)

      const run = () => {
        if (this.scrollingTime() !== startTime) return
        const now = Date.now()
        const elapsed = now - startTime
        const progress = easeInOutQuint(Math.min(elapsed / duration, 1))
        const interpolated = start + (offset - start) * progress

        if (elapsed < duration) {
          elementScroll(interpolated, options, instance)
          requestAnimationFrame(run)
        } else {
          elementScroll(interpolated, options, instance)
        }
      }
      requestAnimationFrame(run)
    },
  }))

  randomIndex = signal(Math.floor(Math.random() * 10000))

  scrollToRandomIndex() {
    this.virtualizer.scrollToIndex(this.randomIndex())
    this.randomIndex.set(Math.floor(Math.random() * 10000))
  }
}