Scrollbar

fuseScrollbar is a wrapper directive for Perfect Scrollbar plugin.

Exported as: fuseScrollbar

Module

Usage

Here's the basic usage of the fuseScrollbar:

Properties

Name Description Default
@Input()
fuseScrollbar: boolean
Whether to enable or disable the custom scrollbars. ''
@Input()
fuseScrollbarOptions: any
Perfect Scrollbar options {{'{}'}}

Methods

It's possible to access the methods of this directive using a @ViewChild or @ViewChildren:

Here's the list of all available methods:

update(): void
Updates the scrollbar.
destroy(): void
Destroy the custom scrollbar instance.
geometry(prefix: string = 'scroll'): ScrollbarGeometry
Returns the geometry of the scrollable element (scrollLeft, scrollTop, scrollHeight, scrollWidth etc.)
position(absolute: boolean = false): ScrollbarPosition
Returns the position of the scrollable element (scrollLeft, scrollTop)
scrollTo(x: number, y?: number, speed?: number): void
Scrolls to given position.
scrollToX(x: number, speed?: number): void
Scrolls to given position on X axis.
scrollToY(y: number, speed?: number): void
Scrolls to given position on Y axis.
scrollToTop(offset: number = 0, speed?: number): void
Scrolls to top.
scrollToBottom(offset: number = 0, speed?: number): void
Scrolls to bottom.
scrollToLeft(offset: number = 0, speed?: number): void
Scrolls to left.
scrollToRight(offset: number = 0, speed?: number): void
Scrolls to right.
scrollToElement(qs: string, offset: number = 0, ignoreVisible: boolean = false, speed?: number): void
Scrolls to found element based on the given QuerySelector. If ignoreVisible is true then scroll won't be triggered if the element is already inside the current viewport.