Get web browser scrollbar dimensions

scrolldimensions.ts

export class ScrollDimensions {
	#parentContext?: HTMLElement;

	#barWidth: number = 0;
	#barNormalWidth: number = 0;
	#barThinWidth: number = 0;

	constructor(parentContext?: HTMLElement) {
		if (typeof document === 'undefined') {
			return;
		}

		this.#parentContext = parentContext ?? document.body;

		this.#measureDimensions();
	}

	get scrollbarWidth() {
		return this.#barWidth;
	}

	get scrollbarNormalWidth() {
		return this.#barNormalWidth;
	}

	get scrollbarThinWidth() {
		return this.#barThinWidth;
	}

	#measureDimensions() {
		if (!this.#parentContext) {
			return;
		}

		// Add temporary box to wrapper
		const scrollbox = document.createElement('div');

		// Make box scrollable
		scrollbox.style.overflow = 'scroll';

		// Append box to document
		this.#parentContext.appendChild(scrollbox);

		scrollbox.style.scrollbarWidth = 'inherit';
		this.#barWidth = this.#measureScrollbarWidths(scrollbox);

		scrollbox.style.scrollbarWidth = 'auto';
		this.#barNormalWidth = this.#measureScrollbarWidths(scrollbox);

		scrollbox.style.scrollbarWidth = 'thin';
		this.#barThinWidth = this.#measureScrollbarWidths(scrollbox);

		// Remove box
		this.#parentContext.removeChild(scrollbox);
	}

	#measureScrollbarWidths(element: HTMLElement): number {
		return element.offsetWidth - element.clientWidth;
	}
}