Set Scrollbar Width

A small JS library to calculate the scrollbar width and inject it into the browser as a CSS variable.

Used to accompany https://github.com/LucidNinja/tailwind-container-break-out, to get the width of scrollbars, since each browser and OS handles this differently. This package can be used standalone.

Installation

npm i set-scrollbar-width

QuickStart

Import setScrollbarWidth into your app and run on page mount.

In JS

In NextJs, this could look like this

``

// _app.js

import { useEffect } from 'react';
import setScrollBarWidth from 'set-scrollbar-width';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
useEffect(() => {
setScrollbarWidth();
}, []);

return ;
}

export default MyApp;
`

You can also set the CSS variable name, if not using with Tailwind Container Break Out.

`
setScrollbarWidth('--my-css-var');
`

$3

`
// eg. Making a div the true width of the viewport

div {
width: calc((100vw - var(--twcb-scrollbar-width)));
}
`

`
// eg. Breaking out of a container div that is 1078px wide, using a 'negative margin hack',
// in order to emulate a full width div inside of a boxed div.

.wider-than-container {
margin-left: calc((-100vw + var(--twcb-scrollbar-width)) / 2 + 1078 / 2 );
margin-right: calc((-100vw + var(--twcb-scrollbar-width)) / 2 + 1078 / 2 );
}
`

Rationale

As per the CSS spec (https://www.w3.org/TR/css-values-3/#viewport-relative-lengths), the vw unit assumes that scrollbars do not exist. This helper package calculates the scrollbar width using Javascript event listeners, allowing you to use --twb-scrollbar-width (or your own variable name), inside of CSS.

$3

There are cases when this can work. EG:

`
body {
width: calc(100vw - (100vw - 100%));
}
`

However, this only works on the body or elements that are as wide as the body. Hence, we need to revert to CSS variables. However, a CSS variable is a reusable piece of math that isn't computed until it is used. If used on the body, then the 100% in this calculation uses the body's width (which is generally the viewport width), but if used inside a nested div that isn't the full width of the viewport, then the 100%` referes to the width of the inner element.

See https://stackoverflow.com/questions/33606565/is-it-possible-to-calculate-the-viewport-width-vw-without-scrollbar for more discussion on this topic.