@xobotyi/scrollbar-width

A tool to get browser's scrollbars width.

× LIVE EXAMPLE ×

---

❤️Please consider starring this project to show your love and support.🙌

---

Installation

npm install @xobotyi/scrollbar-width
# or via yarn
yarn add @xobotyi/scrollbar-width

INSTALLATION NOTE:
The package is published as ES modules only, targets ES2022 and ships its own type definitions.

OR
you can add it directly to your site via a module script with help of UNPKG:

<script type="module">
	import {scrollbarWidth} from 'https://unpkg.com/@xobotyi/scrollbar-width';

	console.log(scrollbarWidth());
</script>

Usage

import {scrollbarWidth} from '@xobotyi/scrollbar-width';

scrollbarWidth(); // 15-17 in desktop browsers with classic scrollbars, 0 where the
// platform draws overlay scrollbars [macOS, most mobile browsers] and 0 in SSR
// environment, or undefined if to call it too early [read below]

This function caches the value to avoid increased resources usage. In case you want to get re-calculated value - pass true as first call parameter.

NOTE:
Function will return undefined in case being called before the DOM is ready.

One more clarification

This function has inner cache due to scrollbars width is not intended to be changed since initial call, but it can in case you toggle the device emulation.
If you need function to recalculate the width call it with true parameter and get new value or set scrollbarWidth.__cache to undefined and next call will return the fresh value.

Related projects

• react-scrollbars-custom — The best React custom scrollbars component. Allows you to customise scrollbars as you like it, crossbrowser!
• zoom-level — A comprehensive cross-browser package that allow you to determine page's and element's zoom level.
• @xobotyi/should-reverse-rtl-scroll — A tool detecting if RTL scroll value should be negative.