fix(cdk): visible control for tui-scroll-controls on iOS (#7741)

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<HTMLElement>,
         @Inject(ANIMATION_FRAME) private readonly animationFrame$: Observable<number>,
     ) {}
-
-    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,
-        ];
-    }
 }

projects/cdk/components/scroll-controls/scroll-controls.template.html

@@ -1,22 +1,24 @@
-<ng-container *ngIf="refresh$ | async as bars">
-    <div
-        *ngIf="bars[0]"
-        class="t-bar t-bar_vertical"
-        [class.t-bar_has-horizontal]="bars[1]"
-    >
+<ng-container *ngIf="!isIOS">
+    <ng-container *ngIf="refresh$ | async as bars">
         <div
-            tuiScrollbar="vertical"
-            class="t-thumb"
-        ></div>
-    </div>
-    <div
-        *ngIf="bars[1]"
-        class="t-bar t-bar_horizontal"
-        [class.t-bar_has-vertical]="bars[0]"
-    >
+            *ngIf="bars[0]"
+            class="t-bar t-bar_vertical"
+            [class.t-bar_has-horizontal]="bars[1]"
+        >
+            <div
+                tuiScrollbar="vertical"
+                class="t-thumb"
+            ></div>
+        </div>
         <div
-            tuiScrollbar="horizontal"
-            class="t-thumb"
-        ></div>
-    </div>
+            *ngIf="bars[1]"
+            class="t-bar t-bar_horizontal"
+            [class.t-bar_has-vertical]="bars[0]"
+        >
+            <div
+                tuiScrollbar="horizontal"
+                class="t-thumb"
+            ></div>
+        </div>
+    </ng-container>
 </ng-container>