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.
yarn install @awey/scroller
Or you can just install it as a script tag.
<script src="path-of-scroller/lib/scroller.iife.js"></script>
Useage
.custom-track-style {
background: red;
}
.custom-bar-style {
background: blue;
}
<div id="container">
<div style="width: 1200px; height: 1200px;"></div>
</div>
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 currentscrollTop
andscrollLeft
value -
scroller.onScroll(callback)
: Bind a scroll event listener to instance, the callback recieves anEvent
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 anEvent
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