Migration Guide

This guide highlights the changes happened in v5

0. New peer dependency package

v4	v5
npm i ngx-scrollbar @angular/cdk	npm i ngx-scrollbar @angular/cdk @juggle/resize-observer

1. NgScrollbar inputs

v4	v5
[trackX], [trackY]	[track]="vertical, horizontal, all"
[invertX], [invertY]	[position]="native, invertX, invertY, invertAll"
[compact]	[appearance]="standard, compact"
[barClass]	[trackClass]
[shown]	[visibility]
[disableOnBreakpoints]	This option has been removed completely

2. CSS variables

• Before

.my-scrollbar {
  --scrollbar-color: transparent;
  --scrollbar-container-color: transparent;
  --scrollbar-thumb-color: rgba(0, 0, 0, 0.2);
  --scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.3);
  --scrollbar-border-radius: 4px;
  --scrollbar-size: 6px;
  --scrollbar-padding: 8px;
  --scroll-view-margin: 0;
  --scroll-view-color: transparent;
}

• After

.my-scrollbar {
  --scrollbar-border-radius: 7px;
  --scrollbar-padding: 4px;
  --scrollbar-track-color: transparent;
  --scrollbar-thumb-color: rgba(0, 0, 0, 0.2);
  --scrollbar-thumb-hover-color: var(--scrollbar-thumb-color);
  --scrollbar-size: 5px;
  --scrollbar-hover-size: var(--scrollbar-size);
}

3. Smooth scroll

• Before:

  • Smooth scroll functions were observables

• After:

  • Smooth scroll functions became promises

• The functions ScrollXTo() and ScrollYTo() are deprecated, now use only scrollTo()

---

API of v4 and v5

v4

Name	Default value	Description
[trackX]	false	Horizontal scrollbar
[trackY]	true	Vertical scrollbar
[invertX]	false	Invert horizontal scrollbar position
[invertY]	false	Invert vertical scrollbar position
[shown]	native	Invert Vertical scrollbar position native, hover, always
[viewClass]	null	Add custom class to the view.
[barClass]	null	Add custom class to scrollbars.
[thumbClass]	null	Add custom class to scrollbars' thumbnails.
[compact]	false	Make scrollbars position appears over content.
[disabled]	false	Disable the custom scrollbars and use the native ones instead.
[scrollToDuration]	400	The smooth scroll duration when a scrollbar is clicked.
[autoUpdate]	true	Auto-update scrollbars on content changes.
[disableOnBreakpoints]	HandsetLandscape, HandsetPortrait	Disable custom scrollbars on specific breakpoints.

---

v5

Name	Default value	Description
[track]	vertical	Directions to track horizontal, vertical, all
[position]	native	Invert scrollbar position native,invertX,invertY, invertAll
[visibility]	native	Scrollbar visibility native, hover, always
[appearance]	compact	Scrollbar appearance standard, compact.
[viewClass]	null	Add custom class to the view.
[trackClass]	null	Add custom class to scrollbars' tracks.
[thumbClass]	null	Add custom class to scrollbars' thumbnails.
[disabled]	false	Disable the custom scrollbars and use the native ones instead.
[trackClickScrollDuration]	400	The smooth scroll duration when a scrollbar is clicked.
[minThumbSize]	20	The minimum scrollbar thumb size in px.
[thumbDragDisabled]	false	A flag used to enable/disable the scrollbar thumb dragged event.
[trackClickDisabled]	false	A flag used to enable/disable the scrollbar track clicked event.