Documentation
Fuse Components
Directives

## Scrollbar

fuseScrollbar is a wrapper directive for Perfect Scrollbar plugin.

Exported as: `fuseScrollbar`

## Module

import { FuseScrollbarModule } from '@fuse/directives/scrollbar';

## Usage

Here's the basic usage of the `fuseScrollbar`:

<div fuseScrollbar [fuseScrollbarOptions]="{wheelPropagation: false, suppressScrollX: true}"> A very long content to add scrollbars. </div>

## 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:

<!-- Content #1 with custom scrollbar --> <div fuseScrollbar> A very long content to add scrollbars. </div> <!-- Content #2 with custom scrollbar --> <div fuseScrollbar> Another long content to add scrollbars. </div> import { FuseScrollbarDirective } from '@fuse/directives/scrollbar/scrollbar.directive'; @ViewChildren(FuseScrollbarDirective) private _fuseScrollbarDirectives: QueryList<FuseScrollbarDirective> ngAfterViewInit(): void { // Iterate through the directives and update all of them fuseScrollbarDirectives.forEach((fuseScrollbarDirective) => { fuseScrollbarDirective.update(); }); }

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.