Class HyloScrollbar

A custom scrollbar.

CSS variables:

  • --hylo-scrollbar-size: the scrollbar thickness (default: 8px)
  • --hylo-scrollbar-color: the handle color (default: #999)
  • --hylo-scrollbar-bg: the bg color (default: #ccc)
  • --hylo-scrollbar-radius: the radius of the edges of the scrollbar (default: 9999px)
  • --hylo-scrollbar-min: the minimum length of the handle (default: 20px)

Properties

hyloDrag hyloDragged hyloScroll inactive position touch type visible

Properties

hyloDrag

hyloDrag: EventEmitter<any>

Fires when the "position" changed because of a mouse interaction with the scrollbar.

hyloDragged

hyloDragged: EventEmitter<any>

Fires when the mouse interaction with the scrollbar stopped.

hyloScroll

hyloScroll: EventEmitter<any>

Fires when the "position" changed.

inactive

inactive: boolean

Disables mouse interaction.

position

position: number = 0

The scroll position (in percentage: 0-100). Defines the position of the handle on the scrollbar.

touch

touch: string | boolean

Defines whether the scrollbar listens to touch events. Can be set as boolean or as a comma separated string of breakpoints (hylo-breakpoint-listener needed).

type

type: "horizontal" | "vertical" = "horizontal"

The type of the scrollbar.

visible

visible: number = 100

How much of the content represented by the scrollbar is visible (in percentage: 0-100). Defines the size of the scrollbar's handle.

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc