diff --git a/src/lib/listing/scroll-button/scroll-button.component.ts b/src/lib/listing/scroll-button/scroll-button.component.ts index 09ad966..c6da626 100644 --- a/src/lib/listing/scroll-button/scroll-button.component.ts +++ b/src/lib/listing/scroll-button/scroll-button.component.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, Component, HostListener, Input, OnInit } from '@angular/core'; import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling'; -import { concatMap, delay, distinctUntilChanged, map, startWith } from 'rxjs/operators'; -import { Observable, of } from 'rxjs'; +import { delay, distinctUntilChanged, map, startWith } from 'rxjs/operators'; +import { combineLatest, fromEvent, Observable } from 'rxjs'; import { Required } from '../../utils'; const ButtonTypes = { @@ -34,11 +34,14 @@ export class ScrollButtonComponent implements OnInit { const showScrollUp = () => scrollIsNeeded() && !reachedEnd(ButtonTypes.top); const showScrollDown = () => scrollIsNeeded() && !reachedEnd(ButtonTypes.bottom); - const scroll$ = this.scrollViewport.elementScrolled().pipe( - startWith(''), - /** Delay first value so that we can wait for items to be rendered in viewport and get correct values */ - concatMap((value, index) => (index === 0 ? of(value).pipe(delay(0)) : of(value))) - ); + /** Force an initial emit, so combineLatest works */ + const scrolled$ = this.scrollViewport.elementScrolled().pipe(startWith(null)); + const resized$ = fromEvent(window, 'resize').pipe(startWith(null)); + const rangeChange$ = this.scrollViewport.renderedRangeStream.pipe(startWith(null)); + + /** Delay so that we can wait for items to be rendered in viewport and get correct values */ + const scroll$ = combineLatest([scrolled$, resized$, rangeChange$]).pipe(delay(0)); + this.showScrollUp$ = scroll$.pipe(map(showScrollUp), distinctUntilChanged()); this.showScrollDown$ = scroll$.pipe(map(showScrollDown), distinctUntilChanged()); }