MurhafSousli
diff --git a/Collapse file
‎projects/ngx-scrollbar/src/lib/styles/disable-interaction.scss‎
Copy file name to clipboard
+16Lines changed: 16 additions & 0 deletions b/Collapse file
‎projects/ngx-scrollbar/src/lib/styles/disable-interaction.scss‎
Copy file name to clipboard
+16Lines changed: 16 additions & 0 deletions
diff --git a/Collapse file
‎projects/ngx-scrollbar/src/lib/viewport/scroll-viewport.scss‎
Copy file name to clipboardExpand all lines: projects/ngx-scrollbar/src/lib/viewport/scroll-viewport.scss
+2-10Lines changed: 2 additions & 10 deletions b/Collapse file
‎projects/ngx-scrollbar/src/lib/viewport/scroll-viewport.scss‎
Copy file name to clipboardExpand all lines: projects/ngx-scrollbar/src/lib/viewport/scroll-viewport.scss
+2-10Lines changed: 2 additions & 10 deletions
diff --git a/Collapse file
‎projects/ngx-scrollbar/src/lib/viewport/viewport-adapter.ts‎
Copy file name to clipboardExpand all lines: projects/ngx-scrollbar/src/lib/viewport/viewport-adapter.ts
-1Lines changed: 0 additions & 1 deletion b/Collapse file
‎projects/ngx-scrollbar/src/lib/viewport/viewport-adapter.ts‎
Copy file name to clipboardExpand all lines: projects/ngx-scrollbar/src/lib/viewport/viewport-adapter.ts
-1Lines changed: 0 additions & 1 deletion
@@ -0,0 +1,16 @@
+/**
+ * DisableInteraction: 'true' | 'false'
+ * Disables scrollbar interaction like dragging thumb and jumping by track click
+ */
+@mixin SetDisableInteractionStuff() {
+  --_viewport-pointer-events: auto;
+  --_scrollbar-pointer-events: auto;
+
+  // Disables scroll when disableInteraction is set to true
+  pointer-events: var(--_viewport-pointer-events);
+
+  &[disableInteraction="true"] {
+    --_viewport-pointer-events: none;
+    --_scrollbar-pointer-events: none;
+  }
+}
@@ -7,6 +7,7 @@
 @use "../styles/scroll" as scroll;
 @use "../styles/dragging" as dragging;
 @use "../styles/overscroll-behavior" as overscrollBehavior;
+@use "../styles/disable-interaction" as disableInteraction;
 
 :host {
   // CSS variables used to customized the look of the scrollbar component
@@ -28,7 +29,6 @@
   /** Scrollbar private CSS variables **/
 
   --_scrollbar-computed-thickness: calc(var(--_scrollbar-thickness) + var(--_scrollbar-offset) * 2);
-  --_scrollbar-pointer-events: auto;
 
   // Convert margin to px value to avoid repeating calculation when used in multiple times
   --_scrollbar-offset-px: calc(var(--_scrollbar-offset) * 1px);
@@ -37,7 +37,6 @@
 
   // The default value for overflow
   --_viewport-overflow: auto;
-  --_viewport-pointer-events: auto;
 
   // Content display, will switch to block if orientation is set to vertical
   --_scrollbar-content-width: fit-content;
@@ -64,9 +63,6 @@
   // Disable selection when a scrollbar is being dragged
   user-select: var(--_viewport-user-select);
 
-  // Disables scroll when disableInteraction is set to true
-  pointer-events: var(--_viewport-pointer-events);
-
   &[orientation="vertical"] {
     --_viewport-overflow: hidden auto;
     --_scrollbar-content-width: unset;
@@ -76,11 +72,6 @@
     --_viewport-overflow: auto hidden;
   }
 
-  &[disableInteraction="true"] {
-    --_viewport-pointer-events: none;
-    --_scrollbar-pointer-events: none;
-  }
-
   @include spacer.SetSpacerStyles();
 
   @include nativeScrollbars.HideNativeScrollbars();
@@ -90,6 +81,7 @@
   @include scroll.SetScrollingStuff();
   @include dragging.SetDraggingStuff();
   @include overscrollBehavior.SetOverscrollBehaviorStuff();
+  @include disableInteraction.SetDisableInteractionStuff();
 }
 
 @layer default {
 
@@ -13,7 +13,6 @@ import {
   OutputEmitterRef,
   InputSignalWithTransform
 } from '@angular/core';
-import { Platform } from '@angular/cdk/platform';
 import { Direction, Directionality } from '@angular/cdk/bidi';
 import { toSignal } from '@angular/core/rxjs-interop';
 import {