diff --git a/projects/core/components/scrollbar/scrollbar.component.ts b/projects/core/components/scrollbar/scrollbar.component.ts index 1dd8bedc74c6..d7f46cc22f6d 100644 --- a/projects/core/components/scrollbar/scrollbar.component.ts +++ b/projects/core/components/scrollbar/scrollbar.component.ts @@ -34,8 +34,6 @@ import {TUI_SCROLL_INTO_VIEW, TUI_SCROLLABLE} from '@taiga-ui/core/constants'; ], }) export class TuiScrollbarComponent { - private delegated = false; - private readonly isLegacy: boolean = !this.cssRef.supports('position', 'sticky') || (tuiIsFirefox(this.userAgent) && @@ -54,6 +52,10 @@ export class TuiScrollbarComponent { @Inject(TUI_IS_IOS) private readonly isIos: boolean, ) {} + get delegated(): boolean { + return this.browserScrollRef.nativeElement !== this.el.nativeElement; + } + get showScrollbars(): boolean { return !this.hidden && !this.isIos && (!this.isLegacy || this.delegated); } @@ -65,7 +67,6 @@ export class TuiScrollbarComponent { @HostListener(`${TUI_SCROLLABLE}.stop`, ['$event.detail']) onScrollable(element: HTMLElement): void { - this.delegated = true; this.browserScrollRef.nativeElement = element; } diff --git a/projects/core/components/scrollbar/scrollbar.style.less b/projects/core/components/scrollbar/scrollbar.style.less index 680e9239bcf1..4eadd048a1d7 100644 --- a/projects/core/components/scrollbar/scrollbar.style.less +++ b/projects/core/components/scrollbar/scrollbar.style.less @@ -32,6 +32,10 @@ flex-basis: auto; width: 100%; height: max-content; + + &_delegated { + height: 100%; + } } .t-bars { diff --git a/projects/core/components/scrollbar/scrollbar.template.html b/projects/core/components/scrollbar/scrollbar.template.html index fe01c7e4c943..9f276ad5f6e0 100644 --- a/projects/core/components/scrollbar/scrollbar.template.html +++ b/projects/core/components/scrollbar/scrollbar.template.html @@ -2,6 +2,9 @@ *ngIf="showScrollbars" class="t-bars" > -