beautify-scrollbar

Beautify browser's scrollbars

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
beautify-scrollbar
1101.0.85 years ago5 years agoMinified + gzip package size for beautify-scrollbar in KB

Readme

build pass js-standard-style npm-version license
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