diff --git a/projects/cdk/components/scroll-controls/scroll-controls.component.ts b/projects/cdk/components/scroll-controls/scroll-controls.component.ts index 45e3135b7d15..28c787054a67 100644 --- a/projects/cdk/components/scroll-controls/scroll-controls.component.ts +++ b/projects/cdk/components/scroll-controls/scroll-controls.component.ts @@ -7,7 +7,7 @@ import { } from '@angular/core'; import {ANIMATION_FRAME} from '@ng-web-apis/common'; import {tuiZoneOptimized} from '@taiga-ui/cdk/observables'; -import {TUI_SCROLL_REF} from '@taiga-ui/cdk/tokens'; +import {TUI_IS_IOS, TUI_SCROLL_REF} from '@taiga-ui/cdk/tokens'; import {Observable} from 'rxjs'; import {distinctUntilChanged, map, startWith, throttleTime} from 'rxjs/operators'; @@ -20,25 +20,24 @@ import {distinctUntilChanged, map, startWith, throttleTime} from 'rxjs/operators export class TuiScrollControlsComponent { readonly refresh$ = this.animationFrame$.pipe( throttleTime(300), - map(() => this.scrollbars), + map(() => { + const {clientHeight, scrollHeight, clientWidth, scrollWidth} = + this.scrollRef.nativeElement; + + return [ + Math.ceil((clientHeight / scrollHeight) * 100) < 100, + Math.ceil((clientWidth / scrollWidth) * 100) < 100, + ]; + }), startWith([false, false]), distinctUntilChanged((a, b) => a[0] === b[0] && a[1] === b[1]), tuiZoneOptimized(this.zone), ); constructor( + @Inject(TUI_IS_IOS) readonly isIOS: boolean, @Inject(NgZone) private readonly zone: NgZone, @Inject(TUI_SCROLL_REF) private readonly scrollRef: ElementRef, @Inject(ANIMATION_FRAME) private readonly animationFrame$: Observable, ) {} - - private get scrollbars(): [boolean, boolean] { - const {clientHeight, scrollHeight, clientWidth, scrollWidth} = - this.scrollRef.nativeElement; - - return [ - Math.ceil((clientHeight / scrollHeight) * 100) < 100, - Math.ceil((clientWidth / scrollWidth) * 100) < 100, - ]; - } } diff --git a/projects/cdk/components/scroll-controls/scroll-controls.template.html b/projects/cdk/components/scroll-controls/scroll-controls.template.html index 33c08437c4f1..f95f7a381464 100644 --- a/projects/cdk/components/scroll-controls/scroll-controls.template.html +++ b/projects/cdk/components/scroll-controls/scroll-controls.template.html @@ -1,22 +1,24 @@ - -
+ +
-
-
+ *ngIf="bars[0]" + class="t-bar t-bar_vertical" + [class.t-bar_has-horizontal]="bars[1]" + > +
+
- + *ngIf="bars[1]" + class="t-bar t-bar_horizontal" + [class.t-bar_has-vertical]="bars[0]" + > +
+ +