Scroll Area

Augments native scroll functionality for custom, cross-browser styling.

About

The Scroll Area component is built on top of the excellent ngx-scrollbar library. It provides a consistent, customizable look for scrollbars across different browsers and operating systems, while maintaining native scrolling performance.

Installation

Run the following command to install the scroll area component:

Usage

scroll-area-usage.ts

Default (Vertical)

Standard vertical scroll area with a list of items and compact scrollbar.

Release Tags

v2.0.0-rc.50
v2.0.0-rc.49
v2.0.0-rc.48
v2.0.0-rc.47
v2.0.0-rc.46
v2.0.0-rc.45
v2.0.0-rc.44
v2.0.0-rc.43
v2.0.0-rc.42
v2.0.0-rc.41
v2.0.0-rc.40
v2.0.0-rc.39
v2.0.0-rc.38
v2.0.0-rc.37
v2.0.0-rc.36
v2.0.0-rc.35
v2.0.0-rc.34
v2.0.0-rc.33
v2.0.0-rc.32
v2.0.0-rc.31
v2.0.0-rc.30
v2.0.0-rc.29
v2.0.0-rc.28
v2.0.0-rc.27
v2.0.0-rc.26
v2.0.0-rc.25
v2.0.0-rc.24
v2.0.0-rc.23
v2.0.0-rc.22
v2.0.0-rc.21
v2.0.0-rc.20
v2.0.0-rc.19
v2.0.0-rc.18
v2.0.0-rc.17
v2.0.0-rc.16
v2.0.0-rc.15
v2.0.0-rc.14
v2.0.0-rc.13
v2.0.0-rc.12
v2.0.0-rc.11
v2.0.0-rc.10
v2.0.0-rc.9
v2.0.0-rc.8
v2.0.0-rc.7
v2.0.0-rc.6
v2.0.0-rc.5
v2.0.0-rc.4
v2.0.0-rc.3
v2.0.0-rc.2
v2.0.0-rc.1

Horizontal Scrolling

Scroll area configured for horizontal overflow, ideal for image galleries or wide tables.

Photo by Ornella Binni
Photo by Ornella Binni
Photo by Tom Byrom
Photo by Tom Byrom
Photo by Vladimir Malyavko
Photo by Vladimir Malyavko
Photo by Kamil Kalbarczyk
Photo by Kamil Kalbarczyk

Themed Variants

Showcasing how to apply custom backgrounds and borders to match your application's design language.

System Logs (Blue)

[INFO] Task executed successfully. ID: 85rjrs
[INFO] Task executed successfully. ID: 3a1g4
[INFO] Task executed successfully. ID: oe01uv
[INFO] Task executed successfully. ID: rgdk8m
[INFO] Task executed successfully. ID: xmc72
[INFO] Task executed successfully. ID: wqfpi9
[INFO] Task executed successfully. ID: sxlv8w
[INFO] Task executed successfully. ID: 9xob0o
[INFO] Task executed successfully. ID: 2ldij
[INFO] Task executed successfully. ID: 0erj9
[INFO] Task executed successfully. ID: gfe0w
[INFO] Task executed successfully. ID: e07zli
[INFO] Task executed successfully. ID: hqwzod
[INFO] Task executed successfully. ID: xdzgej
[INFO] Task executed successfully. ID: k91clk
[INFO] Task executed successfully. ID: mi8iut
[INFO] Task executed successfully. ID: 984igp
[INFO] Task executed successfully. ID: ae0vd8
[INFO] Task executed successfully. ID: nwes27
[INFO] Task executed successfully. ID: 4o3dgj

Recent Activity (Green)

User 1 updated their profile settings.
User 2 updated their profile settings.
User 3 updated their profile settings.
User 4 updated their profile settings.
User 5 updated their profile settings.
User 6 updated their profile settings.
User 7 updated their profile settings.
User 8 updated their profile settings.
User 9 updated their profile settings.
User 10 updated their profile settings.
User 11 updated their profile settings.
User 12 updated their profile settings.
User 13 updated their profile settings.
User 14 updated their profile settings.
User 15 updated their profile settings.

API Reference

Helm API

The hlm directive is used to apply Spartan UI styling to the ng-scrollbar component.

DirectiveSelectorDescription
HlmScrollAreang-scrollbar[hlm] Applies the spartan/ui styling to the ng-scrollbar component.