Scrollbar widths can vary between browsers and operating systems, and unfortunately CSS does not provide a way to detect those widths: we need to use JavaScript.
Other people have solved this problem by measuring the width of the scrollbar on an element:
- http://davidwalsh.name/detect-scrollbar-width (original post)
- http://jsfiddle.net/a1m6an3u/ (live example)
We create a div .scrollbar-measure, add a scrollbar, and return its size.
// Create the div
var scrollDiv = document.createElement("div");
scrollDiv.className = "scrollbar-measure";
document.body.appendChild(scrollDiv);
// Get the scrollbar width
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
console.warn(scrollbarWidth);
// Delete the div
document.body.removeChild(scrollDiv);
This is fairly straightforward, but it is (obviously) not pure CSS.