fix(core): Scrollbar fix scroll leaking to both directions (#9217)

projects/core/components/scrollbar/scrollbar.directive.ts

@@ -36,7 +36,13 @@ export class TuiScrollbarDirective {
         .pipe(takeUntilDestroyed())
         .subscribe(([top, left]) => {
             this.el.style.scrollBehavior = 'auto';
-            this.el.scrollTo({top, left});
+
+            if (this.tuiScrollbar === 'horizontal') {
+                this.el.scrollLeft = left;
+            } else {
+                this.el.scrollTop = top;
+            }
+
             this.el.style.scrollBehavior = '';
         });
 

projects/core/components/scrollbar/scrollbar.service.ts

@@ -2,14 +2,15 @@ import {inject, Injectable} from '@angular/core';
 import {tuiTypedFromEvent, tuiZonefree} from '@taiga-ui/cdk/observables';
 import {tuiInjectElement} from '@taiga-ui/cdk/utils/dom';
 import {TUI_SCROLL_REF} from '@taiga-ui/core/tokens';
-import {map, merge, Observable, switchMap, takeUntil} from 'rxjs';
+import {filter, map, merge, Observable, switchMap, takeUntil} from 'rxjs';
 
 @Injectable()
 export class TuiScrollbarService extends Observable<[number, number]> {
     private readonly el = tuiInjectElement();
     private readonly element = inject(TUI_SCROLL_REF).nativeElement;
     private readonly scroll$ = merge(
         tuiTypedFromEvent(this.el.parentElement!, 'mousedown').pipe(
+            filter(({target}) => target !== this.el),
             map((event) => this.getScrolled(event, 0.5, 0.5)),
         ),
         tuiTypedFromEvent(this.el, 'mousedown').pipe(

projects/demo/src/modules/components/animations/index.html

@@ -5,6 +5,11 @@
     type="components"
 >
     <ng-template pageTab>
+        <p>
+            All CSS and Angular animations are controlled with
+            <code>TUI_ANIMATIONS_SPEED</code>
+            token with 1 being a default value
+        </p>
         <label>
             Speed of animations:
             <input

projects/demo/src/modules/components/animations/state.ts

@@ -1,9 +1,10 @@
-import {Injectable} from '@angular/core';
+import {inject, Injectable} from '@angular/core';
+import {TUI_ANIMATIONS_SPEED, tuiGetDuration} from '@taiga-ui/core';
 import {BehaviorSubject} from 'rxjs';
 
 @Injectable()
 export class AnimationState extends BehaviorSubject<number> {
     constructor() {
-        super(1000);
+        super(tuiGetDuration(inject(TUI_ANIMATIONS_SPEED)));
     }
 }