Update

closes #548

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 14.0.0-beta.3
+
+- fix: In RTL, horizontal scrollbar track click does not work properly, closes [#548](https://github.com/MurhafSousli/ngx-scrollbar/issues/548).
+- fix: PrimeNg integration, native scrollbar still appears in Safari browsers.
+- refactor: Remove the default transition effect when `visibility="hover"`.
+- refactor: Enable scrollbar interactions on mobile devices.
+
 ## 14.0.0-beta.2
 
 - feat: Add a provider function `provideScrollbarOptions` to override of the default options.

package.json

@@ -13,37 +13,37 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^17.2.1",
-    "@angular/cdk": "^17.2.0",
-    "@angular/common": "^17.2.1",
-    "@angular/compiler": "^17.2.1",
-    "@angular/core": "^17.2.1",
-    "@angular/forms": "^17.2.1",
-    "@angular/material": "^17.2.0",
-    "@angular/platform-browser": "^17.2.1",
-    "@angular/platform-browser-dynamic": "^17.2.1",
-    "@angular/platform-server": "^17.2.1",
-    "@angular/router": "^17.2.1",
-    "@angular/ssr": "^17.2.0",
+    "@angular/animations": "^17.2.2",
+    "@angular/cdk": "^17.2.1",
+    "@angular/common": "^17.2.2",
+    "@angular/compiler": "^17.2.2",
+    "@angular/core": "^17.2.2",
+    "@angular/forms": "^17.2.2",
+    "@angular/material": "^17.2.1",
+    "@angular/platform-browser": "^17.2.2",
+    "@angular/platform-browser-dynamic": "^17.2.2",
+    "@angular/platform-server": "^17.2.2",
+    "@angular/router": "^17.2.2",
+    "@angular/ssr": "^17.2.1",
     "@swimlane/ngx-datatable": "^20.1.0",
-    "ag-grid-angular": "^31.0.3",
+    "ag-grid-angular": "^31.1.1",
     "chance": "^1.1.11",
     "express": "^4.18.2",
     "ng-zorro-antd": "^17.2.0",
     "ngx-color-picker": "^16.0.0",
     "ngx-infinite-scroll": "^17.0.0",
-    "primeng": "^17.7.0",
+    "primeng": "^17.8.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.2.0",
-    "@angular/cli": "^17.2.0",
-    "@angular/compiler-cli": "^17.2.1",
+    "@angular-devkit/build-angular": "^17.2.1",
+    "@angular/cli": "^17.2.1",
+    "@angular/compiler-cli": "^17.2.2",
     "@types/express": "^4.17.17",
     "@types/jasmine": "~5.1.0",
-    "@types/node": "^20.11.19",
+    "@types/node": "^20.11.20",
     "jasmine-core": "^5.1.2",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",

projects/ngx-scrollbar-demo/src/app/lab/lab.component.html

@@ -38,7 +38,7 @@
               <mat-button-toggle-group aria-label="Scrollbar visibility"
                                        [(value)]="visibility">
                 <mat-button-toggle value="native">Native</mat-button-toggle>
-                <mat-button-toggle value="always">Always</mat-button-toggle>
+                <mat-button-toggle value="visible">Visible</mat-button-toggle>
                 <mat-button-toggle value="hover">Hover</mat-button-toggle>
               </mat-button-toggle-group>
             </div>
@@ -47,7 +47,7 @@
               <div class="lab-control-label">Appearance</div>
               <mat-button-toggle-group aria-label="Scrollbar Appearance"
                                        [(value)]="appearance">
-                <mat-button-toggle value="standard">Standard</mat-button-toggle>
+                <mat-button-toggle value="native">Native</mat-button-toggle>
                 <mat-button-toggle value="compact">Compact</mat-button-toggle>
               </mat-button-toggle-group>
             </div>
@@ -161,7 +161,7 @@
         </div>
 
         <div>
-          <app-reached-notifier [reached]="reached | async"/>
+          <app-reached-notifier [reached]="reached()"/>
         </div>
 
         <mat-accordion>
@@ -175,7 +175,7 @@
               </mat-panel-description>
             </mat-expansion-panel-header>
 
-            <app-smooth-scroll-form [reached]="scrollToReached$ | async"
+            <app-smooth-scroll-form [reached]="scrollReached()"
                                     (scrollTo)="onScrollTo($event)"
                                     (scrollToElementSelected)="scrollToElementSelected = $event"/>
           </mat-expansion-panel>

projects/ngx-scrollbar-demo/src/app/lab/lab.component.ts

@@ -1,12 +1,10 @@
-import { ChangeDetectionStrategy, Component, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, signal, ViewChild, WritableSignal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
-import { BehaviorSubject, delay, of, Subject, take } from 'rxjs';
 import { MatCardModule } from '@angular/material/card';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatExpansionModule } from '@angular/material/expansion';
-import { CdkDrag } from '@angular/cdk/drag-drop';
 import {
   NgScrollbar,
   ScrollbarAppearance,
@@ -17,12 +15,13 @@ import {
 import { NgScrollbarReached } from 'ngx-scrollbar/reached-event';
 import { NzResizableModule, NzResizeDirection, NzResizeEvent } from 'ng-zorro-antd/resizable';
 import { NzIconModule } from 'ng-zorro-antd/icon';
+
 import { LogoComponent } from '../shared/logo/logo.component';
 import { ResizeChange, ResizeFormComponent } from './resize-form/resize-form.component';
 import { ToggleChange, ToggleFormComponent } from './toggle-form/toggle-form.component';
 import { ReachedEvent, ReachedNotifierComponent } from './reached-notifier/reached-notifier.component';
 import { CssVariablesFormComponent } from './css-variables-form/css-variables-form.component';
-import { SmoothScrollFormComponent } from './smooth-scroll-form/smooth-scroll-form.component';
+import { SmoothScrollFormComponent, SmoothScrollOptionsForm } from './smooth-scroll-form/smooth-scroll-form.component';
 
 @Component({
   selector: 'app-lab',
@@ -31,7 +30,6 @@ import { SmoothScrollFormComponent } from './smooth-scroll-form/smooth-scroll-fo
     CommonModule,
     FormsModule,
     ReactiveFormsModule,
-    CdkDrag,
     NgScrollbar,
     NgScrollbarReached,
     MatCardModule,
@@ -83,11 +81,12 @@ export class LabComponent {
   visibility: ScrollbarVisibility = 'native';
   appearance: ScrollbarAppearance = 'native';
 
-  reached: BehaviorSubject<ReachedEvent> = new BehaviorSubject<ReachedEvent>({});
-
   // For smooth scrollToElement test
   scrollToElementSelected: boolean = false;
-  scrollToReached$: Subject<boolean> = new Subject<boolean>();
+
+  reached: WritableSignal<ReachedEvent> = signal({});
+
+  scrollReached: WritableSignal<any> = signal(false);
 
   get content(): string {
     return '<b>Lorem ipsum dolor sit amet</b>' + content.repeat(this.slider.contentSize);
@@ -116,27 +115,23 @@ export class LabComponent {
   }
 
   onReached(eventName: string): void {
-    this.reached.next({ ...this.reached.value, [eventName]: true });
-    of(null).pipe(
-      delay(600),
-      take(1),
-    ).subscribe(() => this.reached.next({ ...this.reached.value, [eventName]: false }));
+    this.reached.set({ [eventName]: true });
+    setTimeout(() => {
+      this.reached.set({ [eventName]: false })
+    }, 600);
   }
 
-  onScrollTo(event): void {
+  onScrollTo(event: SmoothScrollOptionsForm): void {
     // Prepare scrollTo options from event
-    const options = {
+    const options: Partial<SmoothScrollOptionsForm> = {
       [event.axisXProperty]: event.axisXValue,
       [event.axisYProperty]: event.axisYValue,
       duration: event.duration
     };
     // This shows effect on play button when scrollTo has reached
     const onScrollToReached = () => {
-      this.scrollToReached$.next(true);
-      of(null).pipe(
-        delay(600),
-        take(1),
-      ).subscribe(() => this.scrollToReached$.next(false));
+      this.scrollReached.set(true);
+      setTimeout(() => this.scrollReached.set(false), 600);
     };
 
     if (this.scrollToElementSelected) {

projects/ngx-scrollbar-demo/src/app/lab/reached-notifier/reached-notifier.component.ts

@@ -4,7 +4,6 @@ import { MatChipsModule } from '@angular/material/chips';
 @Component({
   selector: 'app-reached-notifier',
   template: `
-<!--    <span class="reached-event-title">Reached events</span>-->
     <mat-chip-set style="margin-bottom: .5em">
       <mat-chip [class.changed]="reached.top">
         Top

projects/ngx-scrollbar-demo/src/app/lab/smooth-scroll-form/smooth-scroll-form.component.ts

@@ -7,11 +7,11 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 
 @Component({
+  standalone: true,
   selector: 'app-smooth-scroll-form',
   templateUrl: './smooth-scroll-form.component.html',
   styleUrls: ['./smooth-scroll-form.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
   imports: [MatButtonToggleModule, FormsModule, MatFormFieldModule, MatInputModule, MatButtonModule, MatIconModule]
 })
 export class SmoothScrollFormComponent implements DoCheck {
@@ -28,14 +28,14 @@ export class SmoothScrollFormComponent implements DoCheck {
   };
 
   @Input() reached: boolean;
-  @Output('scrollToElementSelected') scrollToElement = new EventEmitter();
-  @Output() scrollTo = new EventEmitter();
+  @Output('scrollToElementSelected') scrollToElement: EventEmitter<boolean> = new EventEmitter<boolean>();
+  @Output() scrollTo: EventEmitter<SmoothScrollOptionsForm> = new EventEmitter<SmoothScrollOptionsForm>();
 
   ngDoCheck() {
-    const axisX = this.options.axisXProperty === 'unset' ? '' : `${ this.options.axisXProperty }: ${ this.options.axisXValue }`;
-    const axisY = this.options.axisYProperty === 'unset' ? '' : `${ this.options.axisYProperty }: ${ this.options.axisYValue }`;
-    const comma = this.options.axisXProperty !== 'unset' && this.options.axisYProperty !== 'unset' ? ', ' : '';
-    const durationComma = this.options.axisXProperty !== 'unset' || this.options.axisYProperty !== 'unset' ? ', ' : '';
+    const axisX: string = this.options.axisXProperty === 'unset' ? '' : `${ this.options.axisXProperty }: ${ this.options.axisXValue }`;
+    const axisY: string = this.options.axisYProperty === 'unset' ? '' : `${ this.options.axisYProperty }: ${ this.options.axisYValue }`;
+    const comma: string = this.options.axisXProperty !== 'unset' && this.options.axisYProperty !== 'unset' ? ', ' : '';
+    const durationComma: string = this.options.axisXProperty !== 'unset' || this.options.axisYProperty !== 'unset' ? ', ' : '';
     if (this.options.scrollFunc === 'scrollToElement') {
       this.displayFunction =
         `scrollToElement('#target', {${ axisY }${ comma }${ axisX }${ durationComma }duration: ${ this.options.duration }})`;
@@ -57,10 +57,9 @@ export class SmoothScrollFormComponent implements DoCheck {
   play() {
     this.scrollTo.emit(this.options);
   }
-
 }
 
-interface SmoothScrollOptionsForm {
+export interface SmoothScrollOptionsForm {
   scrollFunc: string;
   duration: number;
   axisYProperty: string;

projects/ngx-scrollbar-demo/src/app/prime-ng-table/prime-ng-table.component.html

@@ -51,9 +51,8 @@
                   scrollHeight="200px"
                   styleClass="border-1 surface-border"
                   [style]="{'width': '200px', 'height': '200px'}">
-        <ng-template pTemplate="item" let-item let-options="options">
-          <div class="item"
-               [ngClass]="{ 'surface-ground': options.odd }">
+        <ng-template pTemplate="item" let-item>
+          <div class="item">
             {{ item.vin }}
           </div>
         </ng-template>

projects/ngx-scrollbar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-scrollbar",
-  "version": "14.0.0-beta.2",
+  "version": "14.0.0-beta.3",
   "license": "MIT",
   "homepage": "https://ngx-scrollbar.netlify.com/",
   "author": {

projects/ngx-scrollbar/src/lib/ng-scrollbar-core.ts

@@ -80,7 +80,7 @@ interface ViewportState {
     '[attr.appearance]': 'appearance',
     '[attr.visibility]': 'visibility()',
     '[attr.orientation]': 'orientation()',
-    '[attr.disableInteraction]': 'interactionDisabled()'
+    '[attr.disableInteraction]': 'disableInteraction()'
   },
   providers: [{ provide: NG_SCROLLBAR, useExisting: NgScrollbarCore }]
 })
@@ -137,11 +137,6 @@ export abstract class NgScrollbarCore implements _NgScrollbar, OnInit, AfterView
     transform: booleanAttribute
   });
 
-  /** A computed signal for disabling the interaction */
-  interactionDisabled: Signal<boolean> = computed(() => {
-    return this.isMobile || this.disableInteraction();
-  });
-
   /** Whether ResizeObserver is disabled */
   disableSensor: InputSignalWithTransform<boolean, string | boolean> = input<boolean, string | boolean>(this.options.disableSensor, {
     transform: booleanAttribute

projects/ngx-scrollbar/src/lib/scrollbar/scrollbar-adapter.ts

@@ -32,7 +32,7 @@ export abstract class ScrollbarAdapter {
 
   constructor() {
     effect((onCleanup: EffectCleanupRegisterFn) => {
-      if (this.cmp.interactionDisabled()) {
+      if (this.cmp.disableInteraction()) {
         this.pointerEventsSub?.unsubscribe();
       } else {
         this.zone.runOutsideAngular(() => {

projects/ngx-scrollbar/src/lib/scrollbar/shared.scss

@@ -20,6 +20,10 @@
 }
 
 .ng-scrollbar-track {
+  // Prevent native scrolling (panning up and down) on mobile
+  touch-action: none;
+  // Prevent selecting when pointer is down while dragging on mobile
+  user-select: none;
   // We use the absolute position for the hover effect
   // Set the proper direction of size transition on hover
   top: var(--_scrollbar-track-top);

projects/ngx-scrollbar/src/lib/styles/hide-native-scrollbars.scss

@@ -6,9 +6,9 @@
 
 @mixin HideNativeScrollbars() {
   @include selector.Viewport {
-    scrollbar-width: none; /* Firefox 64 */
-    &::-webkit-scrollbar { /** WebKit */
-      display: none;
+    scrollbar-width: none !important; /* Firefox 64 */
+    &::-webkit-scrollbar { /** Chrome, Safari, Edge */
+      display: none !important;
     }
   }
 }