Skip to content

attach - arguments

Possible arguments that can be used in attach method.

bar

General settings for scrollbar "bar" thickness and offset.

Default value

ts
bar: {
  y: {
    width: 6,
    offset: [0, 0],
  },
  x: {
    height: 6,
    offset: [0, 0],
  },
},

Type

ts
bar?: {
  y?: {
    width?: number;
    offset?: [number, number];
  };
  x?: {
    height?: number;
    offset?: [number, number];
  };
};

className

ClassName used to target HTMLElement that has overflow: auto on it, meaning is scrollable container.

Default value

ts
className: "light-scrollbar",

Type

ts
className?: string;

disableFocusPrevent

By default emitting focus event is disabled, means when scroll is initialized from this container no focus event will be emitted.

Default value

ts
disableFocusPrevent: true,

Type

ts
disableFocusPrevent?: boolean;

wrapperPlacement

In order to create custom scrollbar, at this moment only possible solution is to wrap scrollable container with wrapper. This plugin can create wrapper inside your container and switch node and its all classes/attrs/listeners from original container to inner child, or create outside wrapper.

Default value

ts
wrapperPlacement: WrapperPlacement.inside,

Type

ts
wrapperPlacement?: WrapperPlacement;
ts
export enum WrapperPlacement {
  "inside" = "inside",
  "outside" = "outside",
}

wrapperElement

There is possibility to create wrapper element from given HTMLElement passed via this parameter.

Default value

null

Type

ts
wrapperElement?: HTMLElement;

showOnHover

Scrollbars can be visible only when hover on container.

Default value

ts
showOnHover: false,

Type

ts
showOnHover?: number | false

Released under the MIT License.