@itkyk/custom-scrollbar NPM

#@itkyk/ Custom Scrollbar

Install

$ npm i @itkyk/custom-scrollbar

initialize

import { createScrollbar, ScrollbarOptions } from "@itkyk/custom-scrollbar";

const options: ScrollbarOptions = {
  // ...something
}

const customScrolbar = createScrollbar(".target", options);

Option

key	default	type	description
contsnts	".custom-scroll-contents"	`string` or `HTMLElement`	The className of dom given `overflow: scroll` or `overflow: auto`
barWrap	".custom-scroll-wrap"	`string` or `HTMLElement`	The className of the wrap in the range of motion of the scrollbar
bar	".custom-scroll-bar"	`string` or `HTMLElement`	The className of scrollbar
direction	"vertical"	`vertical` or `horizontal`	Scroll direction. This params contains `vertical` or `horizontal`
resize	true	`boolean`	Optimize when resizing.(Scrollbar height calculation and `setScrollbarStatus`)

methods

method	description
destroy()	Return to initial state and remove all EventListener.
reload()	Initialize again.
isNeedScrollbar()	Returns a boolean whether a scroll bar is required.
setScrollbarStatus()	If you do not need a scrollbar, add `disable-scrollbar` to the wrap Element class.Remove it if necessary.
getBarSize()	Get the size of the scroll bar in px units. If "vertical", then get `height`, but if "horizontal", then get `width`
options	Returns final `ScrollbarOptions` information.
elements.target	Stores the final `target` element.
elements.contents	Stores the final `contents` element.
elements.contentsInner	Stores the final `contentsInner` element.
elements.wrap	Stores the final `wrap` element.
elements.bar	Stores the final `bar` element.