Class: ScrollBar

ScrollBar(options)

new ScrollBar(options)

Custom JavaScript ScrollBar for any conatiner

Build a custom ScrollBar according to the given DOM target, inspired from https://github.com/buzinas/simple-scrollbar <3

Parameters:
Name Type Description
options Object

The ScrollBar options

Properties
Name Type Attributes Default Description
target Object

The DOM node to add a ScrollBar to
horizontal Boolean <optional>
 false

The scrollbar direction, default to vertical
minSize Number <optional>
 15

The minimal scrollbar size in pixels
style Object <optional>

The scrollbar style to apply

Properties
Name Type Attributes Default Description
color String <optional>
 'rgb(155, 155, 155)'

The CSS color
size String <optional>
 '10px'

The scrollbar with or height in px depending on horizontal flag
radius String <optional>
 '5px'

The border radius in px, by default is half the scrollbar width
lowOpacity String <optional>
 '.2'

The scrollbar opacity when not hovered
highOpacity String <optional>
 '.8'

The scrollbar opacity when hovered
transitionDuration String <optional>
 '.2'

The opacity transition duration in seconds
Since:
  • January 2022
Author:
  • Arthur Beaulieu
Source:

Members

(private) _bar :Object

The DOM element that hold the custom scrollbar itself

Type:
  • Object
Source:

(private) _container :Object

The DOM element that will contain the DOM target content, this DOM element hides the default browser scrollbar

Type:
  • Object
Source:

(private) _horizontal :Boolean

Whether the scrollbar should be horizontal or not

Type:
  • Boolean
Source:

(private) _lastPageX :Number

For horizontal scroll, save the last user X position for position computations

Type:
  • Number
Source:

(private) _lastPageY :Number

For vertical scroll, save the last user Y position for position computations

Type:
  • Number
Source:

(private) _minSize :Number

The minimal size in pixels for scrollbar to be

Type:
  • Number
Source:

(private) _scrollRatio :Number

Ratio between DOM target and content size, if < 1, it requires a scrollbar

Type:
  • Number
Source:

(private) _style :Object

Optionnal custom style object. Support for color, size, radius, lowOpacity, highOpacity and transitionDuration

Type:
  • Object
Source:

(private) _target :Object

The DOM target element to put a scrollbar on

Type:
  • Object
Source:

(private) _wrapper :Object

The DOM element that will wrap the DOM target content

Type:
  • Object
Source:

style

Updates the scrollbar style. Support for color, size, radius, lowOpacity, highOpacity and transitionDuration

Source:

Methods

(private, static) _barClicked(event)

Add document events when bar is clicked to track the mouse movement in parent

Parameters:
Name Type Description
event Object

The Mouse event from this._events()
Since:
  • January 2022
Author:
  • Arthur Beaulieu
Source:

(private, static) _drag(event)

Handle the drag animation of the bar

Parameters:
Name Type Description
event Object

The Mouse event from this._events()
Since:
  • January 2022
Author:
  • Arthur Beaulieu
Source:

(private, static) _events() → {Promise}

Handle ScrollBar mouse events

Since:
  • January 2022
Author:
  • Arthur Beaulieu
Source:
Returns:

A Js promise resolved when all events are registered

Type
Promise

(private, static) _init() → {Promise}

Build DOM hierrarchy, ScrollBar double wraps the content to append its custom bar

Since:
  • January 2022
Author:
  • Arthur Beaulieu
Source:
Returns:

A Js promise resolved when DOM is fully initialized

Type
Promise

(private, static) _stopDrag()

Remove document events when bar is released

Since:
  • January 2022
Author:
  • Arthur Beaulieu
Source:

(private, static) _updateScrollBar()

Compute bar position according to DOM measurements

Since:
  • January 2022
Author:
  • Arthur Beaulieu
Source:

(static) updateScrollbar()

Manually update the scrollbar

Since:
  • January 2022
Author:
  • Arthur Beaulieu
Source: