scroller

The best custom scroll bar. Can be nested.

> I used it in my vue ui components library Admin-Ui. If you want to use it in vue or react, maybe you can look up the source of Admin-Ui Scroller

> Attension: Scroller has been rewritten with typescript since version 2

install

Scroller can be installed by npm or yarn.

``bash yarn install @awey/scroller`

Or you can just install it as a script tag.

`html`

`Useage`

css
.custom-track-style {
  background: red;
}
.custom-bar-style {
  background: blue;
}

`html

`js import Scroller from 'scroller' import from 'scroller/lib/style.css'

const myScroller = new Scroller({ el: document.getElementById('container'), direction: 'both', offset: 4, scaleable: true, trackClassName: 'custom-track-style', barClassName: 'custom-bar-style' })`

> Note: All the children in container element should be element nodes (nodeType === 1). All the other types will be ignored.

`Options`

* el: DOMElement, required, a container element which you want to made it a custom scrollbar *direction: String, optional, determine which direction you would like to scroll. it support values below. *both: default value *horizontal*vertical*none*offset: Number, optional, the space between scroll bar and element edge, max is 8 and min to 0, the default is 4 *scaleable: Boolean, optional, determine if the scroll bar width can enlarge or not when user hovering over the element *trackClassName: String, optional, you can use it to customize the track style *barClassName: String, optional, you can use it to customize the bar style

`Methods`

* Scroller(options): Constructor, it returns an instance of scroller *scroller.setDirection(direction): Set scroll direction, it returns an instance of scroller *scroller.getScroll(): Return current scrollTop and scrollLeftvalue *scroller.onScroll(callback): Bind a scroll event listener to instance, the callback recieves an Eventobject which is the native scroll event object. It returns current scroll instance *scroller.offScroll(callback): Unbind a scroll event listener to instance, the callback recieves an Eventobject which is the native scroll event object. Omitting callback will unbind all the scroll event listener. It returns current scroll instance *scroller.scrollTo(position): Let scroller scroll to the specified position. It returns current scroll instanc. positionsis an object which contains keys below *scrollTop: Optional *scrollLeft: Optional *scroller.destroy()`: Instance method, use it to destroy a scroller instance

Useage

css
.custom-track-style {
background: red;
}
.custom-bar-style {
background: blue;
}

html

js
import Scroller from 'scroller'
import from 'scroller/lib/style.css'

const myScroller = new Scroller({
  el: document.getElementById('container'),
  direction: 'both',
  offset: 4,
  scaleable: true,
  trackClassName: 'custom-track-style',
  barClassName: 'custom-bar-style'
})

> Note: All the children in container element should be element nodes (nodeType === 1). All the other types will be ignored.

Options

* el

: DOMElement, required, a container element which you want to made it a custom scrollbar
*

direction

: String, optional, determine which direction you would like to scroll. it support values below.
  *

both

: default value
  *

horizontal

vertical

none

offset

: Number, optional, the space between scroll bar and element edge, max is 8 and min to 0, the default is 4
*

scaleable

: Boolean, optional, determine if the scroll bar width can enlarge or not when user hovering over the element
*

trackClassName

: String, optional, you can use it to customize the track style
*

barClassName: String, optional, you can use it to customize the bar style

Methods

* Scroller(options)

: Constructor, it returns an instance of scroller
*

scroller.setDirection(direction)

: Set scroll direction, it returns an instance of scroller
*

scroller.getScroll(): Return current scrollTop and scrollLeft

 value
*

scroller.onScroll(callback): Bind a scroll event listener to instance, the callback recieves an Event

 object which is the native scroll event object. It returns current scroll instance
*

scroller.offScroll(callback): Unbind a scroll event listener to instance, the callback recieves an Event

 object which is the native scroll event object. Omitting callback will unbind all the scroll event listener. It returns current scroll instance
*

scroller.scrollTo(position): Let scroller scroll to the specified position. It returns current scroll instanc. positions

 is an object which contains keys below
  *

scrollTop

: Optional
  *

scrollLeft

: Optional
*

scroller.destroy()`: Instance method, use it to destroy a scroller instance