What Is My Browser Scrollbar Width? Sizes & scrollbar-width

Scrollbar Width Checker builds a hidden overflowing box, measures the gap between its outer and inner width, and reports your browser's actual scrollbar width in pixels the moment the page loads. A reading of 0px isn't a bug — it just means you're on macOS or a mobile browser using overlay scrollbars that don't reserve any layout space. This is the exact number that explains why your screen width and browser viewport width rarely match down to the pixel.

Asking what is my browser scrollbar width usually means a page is misaligned and you need the real number, not a guess. The answer is a value in CSS pixels that depends on your operating system, your settings and your devices, and it can be 0 on one machine and 17 on the next.

What Is My Browser Scrollbar Width? How to Measure It in px

To find the value for your own setup, compare the full window with the part your page can actually use. The viewport includes the scrollbar, while the root element (the html tag) does not, so the difference between the two is the width of the bar.

Take a window that is 1,280 px wide with a classic 17px scrollbar on a webpage. Your content gets 1,280 − 17 = 1,263 px. A box set to 100vw is still 1,280 px wide, so it overflows by 17px and causes a horizontal scrollbar. On high-resolution screens the platform scrollbar width stays the same length in CSS units, but page zoom changes the number you measure.

Measuring Default Scrollbar Width with JavaScript

Developers read this value in two common ways. The first uses the page itself:

That returns 0 if the page has no overflow. The second works anywhere: create a hidden HTML container with overflow-y: scroll, then subtract its clientWidth from its offsetWidth.

const box = document.createElement('div');
box.style.cssText = 'overflow-y:scroll;width:50px;position:absolute;top:-999px';
document.body.appendChild(box);
const width = box.offsetWidth - box.clientWidth;
box.remove();

Using the CSS scrollbar-width Property

You can't set an exact pixel size, but the scrollbar-width property lets you ask for a thinner bar or none at all. It is defined in the CSSWG's Scrollbars Module Level 1, a W3C specification. Its purpose is saving space, not aesthetics. Early drafts discussed a <length> value as a maximum width, but the property kept preset values instead. Set css scrollbar-width on the html element and it applies to the viewport.

Keyword Values and Property Values for scrollbar-width

There are three keyword values, plus the global ones every CSS property accepts:

The property applies to scrolling boxes, its computed value is as specified and its animation type is discrete. It is not inherited, so an ancestor set to thin leaves its descendants on auto. None of these property values give you a fixed thickness of a scrollbar as a number; for that, leave it on auto and measure.

Browser Support, Baseline Status and Fallback

scrollbar-width has shipped in Mozilla's engine since version 64. Chromium-based engines added it in version 121 and Safari in 18.2, so it became Baseline in December 2024. For older engines, the vendor-specific ::-webkit-scrollbar pseudo-elements are the usual fallback. Engines ignore webkit-scrollbar styles once scrollbar-width is anything other than auto, so check cross-browser compatibility before mixing them. Pair it with scrollbar-color for colour.