React Hook: Get Scrollbar Width

 by Robin Wieruch
 - Edit this Post

A neat that I used in some of my which gets you the scrollbar's width. You can just use it in any React component and it returns the width of the scrollbar for this particular browser (and operating system):

import * as React from 'react';
export const useScrollbarWidth = () => {
const didCompute = React.useRef(false);
const widthRef = React.useRef(0);
if (didCompute.current) return widthRef.current;
// Creating invisible container
const outer = document.createElement('div');
outer.style.visibility = 'hidden';
outer.style.overflow = 'scroll'; // forcing scrollbar to appear
outer.style.msOverflowStyle = 'scrollbar'; // needed for WinJS apps
document.body.appendChild(outer);
// Creating inner element and placing it in the container
const inner = document.createElement('div');
outer.appendChild(inner);
// Calculating difference between container's full width and the child width
const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
// Removing temporary elements from the DOM
outer.parentNode.removeChild(outer);
didCompute.current = true;
widthRef.current = scrollbarWidth;
return scrollbarWidth;
};

In essence the custom hook just renders a hidden scrollbar into the project, measures it, and removes it again. Afterward it returns the result.

As alternative, if you would want to have the height instead of the width of the scrollbar in case of a horizontal scroll container, then just replace the width properties with height properties.

Personally I never ran into this problem myself, however, when we tested an application on a client's machine, there are certain cases where the scrollbar has no overlay and takes up space. Often that's just okay, however, we ran into use cases where we had to have the scrollbar's size for resolving issues regarding the layout of the application.

Keep reading about 

A neat custom React Hook that I used in some of my React freelance projects which checks if an element's content has overflow (here: vertical overflow): If you want to detect a horizontal…

A neat custom React Hook that I used in some of my React freelance projects which detects the scroll direction of a user: In a function component , the custom React hook can be used this way…

The Road to React

Learn React by building real world applications. No setup configuration. No tooling. Plain React in 200+ pages of learning material. Learn React like 50.000+ readers.

Get it on Amazon.