michellocana / scrollbar-width

Lightweight tool to get browser's scrollbars width of any browser.

@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.

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.