@xobotyi/scrollbar-width

What is @xobotyi/scrollbar-width?

The @xobotyi/scrollbar-width package is a small, dependency-free utility for measuring the width of the browser's scrollbar. It is useful for accurately calculating layout dimensions when scrollbars might affect the overall width of containers, particularly in responsive designs or complex layouts.

What are @xobotyi/scrollbar-width's main functionalities?

Get scrollbar width

This feature allows you to measure the width of the scrollbar. The function returns the width in pixels as a number. If the scrollbar is not present, it returns 0. This is useful for adjusting layout dimensions dynamically based on the presence of scrollbars.

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

const width = scrollbarWidth();
console.log(`Scrollbar width is ${width}px`);

Re-measure scrollbar width

This feature forces a re-measurement of the scrollbar width. This can be useful when the document or window has changed significantly (e.g., after dynamically loading content) and you need to ensure the measurement is still accurate.

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

const width = scrollbarWidth(true);
console.log(`Re-measured scrollbar width is ${width}px`);

Other packages similar to @xobotyi/scrollbar-width

dom-helpers

The 'dom-helpers' package offers a variety of utilities for managing DOM elements, including a function to measure scrollbar width. Compared to @xobotyi/scrollbar-width, dom-helpers provides a broader range of DOM-related utilities, which makes it more versatile but also larger in size.

scrollbar-size

Similar to @xobotyi/scrollbar-width, 'scrollbar-size' is a focused utility for measuring the size of the scrollbar. It provides a similar functionality but differs in API design and implementation details. Users might choose one over the other based on specific project compatibility or personal preference in API style.

README

@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:
This lib is written in TypeScript and delivered with both, transpiled and untranspiled ES versions:

• main field of package.json is pointing to transpiled ES5-compatible version with CJS modules resolution;
• module field is pointing to transpiled ES5-compatible version with ES modules resolution;
• esnext field is pointing to the ESnext version with ES modules resolution;

OR
you can add it directly to your site via the <script /> with help of UNPKG:

<script src="https://unpkg.com/@xobotyi/scrollbar-width/dist/index.min.js"/>

After that you will be able to use the function as xobotyi.scrollbarWidth()

Usage

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

scrollbarWidth(); // for most browsers will return 17 and 0 for 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.