Function ScrollBar

src/components/scrollbar/index.js:30–316

(options)

 * @returns {Scrollbar & HTMLElement}
 */
export default function ScrollBar(options) {
	if (!options || !options.parent) {
		throw new Error("ScrollBar.js: Parent element required.");
	}

	const { placement = "right" } = options;
	const $cursor = tag("span", {
		className: "scroll-cursor",
		style: {
			top: 0,
			left: 0,
		},
	});
	const $thumb = tag("span", {
		className: "thumb",
	});
	const $container = tag("div", {
		className: "container",
		children: [$cursor, $thumb],
	});
	const $scrollbar = tag("div", {
		className: `scrollbar-container ${placement}`,
		child: $container,
	});
	const config = {
		passive: false,
	};
	const TIMEOUT = 2000;
	const isVertical = placement === "right" || placement === "left";
	const observer = new MutationObserver(observerCallback);
	let scroll = 0;
	let touchStartValue = {
		x: 0,
		y: 0,
	};
	let scrollbarSize = 20;
	let thumbHeight = options.thumbHeight ?? 50;
	let height;
	let width;
	let rect;
	let scrollbarTimeoutHide;
	let scrollbarTimeoutRemove;
	let onshow;
	let onhide;
	let touchStarted = false;

	if (options.width) scrollbarSize = options.width;

	setWidth(scrollbarSize);
	setThumbHeight(thumbHeight);
	$scrollbar.onScroll = options.onscroll;
	$scrollbar.onScrollEnd = options.onscrollend;
	$thumb.addEventListener("touchstart", touchStart, config);
	$thumb.addEventListener("mousedown", touchStart, config);
	window.addEventListener("resize", resize);
	observer.observe($cursor, {
		attributes: true,
	});