This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

thavixt-scrollbar-core

A basic Javascript package to customize scrollbars on your website.

Demo

demo page

Install

npm install thavixt-scrollbar-core

or import the source directly:

import Scrollbar from 'https://unpkg.com/thavixt-scrollbar-core/dist/index.js';

Example

import { ThavixtScrollbar } from "thavixt-scrollbar-core";

new ThavixtScrollbar("id_of_scrollable_html_element", {
	onScrollToEnd: (directions) => {
		console.log(`you reached the ${directions.join(',')} end`);
	},
	styles: {
		thumbColor: "#999",
		thumbHoverColor: "#ccc",
		trackColor: "#444",
	},
});

API

new ThavixtScrollbar(container, options?)

container

Type: HTMLDivElement

options

Type: object

type ThavixtScrollbarOptions = Partial<{
	// Callback on scroll
	onScroll?: (details: ScrollbarScrollDetails) => void;
	// Callback when the element is scrolled to it's min/max width/height
	onScrollToEnd?: (directions: ScrollDirection[]) => void;
	// Styles to apply to the element's vertical/horizontal scrollbar
	styles?: ScrollbarStyles;
}>;

interface ScrollbarStyles {
	// Border radius
	borderRadius?: number;

	// Dimensions
	width?: number;
	height?: number;

	// Light theme colors
	thumbColor?: string;
	thumbHoverColor?: string;
	trackColor?: string;
	
	// Dark theme colors
	thumbColorDark?: string;
	thumbHoverColorDark?: string;
	trackColorDark?: string;
}

type ScrollDirection = "top" | "bottom" | "left" | "right";
type ScrollbarScrollDetails = Record<ScrollDirection, number>;