beautify-scrollbar

Beautify browser's scrollbars.

Installation

npm:

npm i --save beautify-scrollbar

or yarn

yarn add  beautify-scrollbar

Get Started

import 'beautify-scrollbar/dist/index.css';
import BeautifyScrollbar from 'beautify-scrollbar';

const container = document.querySelector('#container')
const bs = new BeautifyScrollbar(container);

// or
const bs = new BeautifyScrollbar('#container');

// or with options
const bs = new BeautifyScrollbar('#container', {
    wheelSpeed: 2
});

Visit the examples.

Note: the height of this container element which is returned by getBoundingClientRect() can not be 0, it must hava a height style.

Options

wheelSpeed

Type: Number

Default: 1

The scroll speed applied to mousewheel event.

threshold

Type: Number

Default: 1

The threshold value to trigger next-fetch in infinite scrolling.

shownScrollbarX

Type: Boolean

Default: true

When set to false, the scroll bar in X axis will not be available, regardless of the content width.

shownScrollbarY

Type: Boolean

Default: true

When set to false, the scroll bar in Y axis will not be available, regardless of the content height.

maxThumbXLength

Type: Number

Default: undefined

When set to an integer value, the X thumb part of the scrollbar will not expand over that number of pixels.

maxThumbYLength

Type: Number

Default: undefined

When set to an integer value, the Y thumb part of the scrollbar will not expand over that number of pixels.

Events

beautify-scrollbar dispatches custom events.

container.addEventListener('bs-x-reach-end', () => ..., false);

bs-y-reach-start

This event fires when scrolling reaches the start of the y-axis.

bs-y-reach-end

This event fires when scrolling reaches the end of the y-axis.

bs-x-reach-start

This event fires when scrolling reaches the start of the x-axis.

bs-x-reach-end

This event fires when scrolling reaches the end of the x-axis.

bs-update-scroll-value

This event fires when scrollLeft or scrollTop is updated.

bs-reach-threshold

This event fires when diff-value is lte the options.threshold.

diff-value = container.scrollHeight - container.scrollTop - container.height

API

update([options])

Update some props of instance when you need. Maybe it's useful when it combines with v2-lazy-list;

destroy

Destroy the instance and will unbind events whose instance bind.

Development

git clone git@github.com:dwqs/beautify-scrollbar.git

cd beautify-scrollbar

npm i 

npm run dev

LICENSE

MIT