sndrgb / smoothie Goto Github PK

Smooth fake scrollbar for your `awesome` projects

Inspired and written on top of smooth-scrolling by Baptiste Briel and VirtualScroll by Florian Morel

npm i smoothie-scroll --s

Init your Smoothie with new Smoothie(el, options) with el as smoothie wrapper

el: DOM element or DOM selector

and the following options (if you want)

orientation: 'vertical',
deltaX: true, || default: false (if you want horizontal scroll with side delta on mouse/trackpad)
ease: 0.075,
prefix: prefix('transform'),
listener: document.body,

vs: {
    limitInertia: false,
    mouseMultiplier: 1,
    touchMultiplier: 1.5,
    firefoxMultiplier: 30,
    preventTouch: true,
},

vs is options are for VirtualScroll utility

You can tween enter and exit of scrollbar using css classes: .is-entering and .is-leaving on: .scrollbar-track

• new Smoothie(options) Return a new instance of Smoothie. See the options below.

• instance.init(: initial position :) Life comes here! Optional you can set initial position

• instance.update() Update the instance with new bounds.

• instance.on() Listen to the scroll.

• instance.off() Remove the listener.

• instance.destroy() Will remove all events and unbind the DOM listeners.

• instance.setTo() Immediatly set position of your scrollbar.

Events note: Each instance will listen only once to any DOM listener. These listener are enabled/disabled automatically. However, it's a good practice to always call destroy() on your Smoothie instance, especially if you are working with a SPA.

• High priority: Unit and E2E tests

MIT.