Calculate the size of scrollbar

1. Subtract clientWidth from offsetWidth

The clientWidth property indicates the width without scrollbar. The offsetWidth, on the other hand, includes the scrollbar if there is.

Here is the simple calculation to determine the width of scrollbar:

const scrollbarWidth = document.body.offsetWidth - document.body.clientWidth;

2. Use a fake element

We create two fake div elements, one of them is the child of the other. Then calculate the difference between their widths.

const calculateScrollbarWidth = function() {
// Create the parent element
const outer = document.createElement('div');
outer.style.visibility = 'hidden';
outer.style.overflow = 'scroll';

// Append it to `body`
document.body.appendChild(outer);

// Create the child element
const inner = document.createElement('div');
outer.appendChild(inner);

// Calculate the difference between their widths
const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;

// Remove the parent element
document.body.removeChild(outer);

return scrollbarWidth;
};

This method doesn't work on macOS if the Show scroll bars option is set as Automatically based on mouse or trackpad or When scrolling.

Show scroll bars option on macOS

More

Previous
Calculate the mouse position relative to an element
Next
Change the website favicon