Easily measure scrollbar width and height

measure-scrollbar.html

<div id="outer">
	<div id="inner">
	</div>
</div>

<style>
#outer {
	width: 2em;
	height: 2em;
	overflow: scroll;
	border: 1px solid red;
	position: relative;
}

#inner {
	width: 4em;
	height: 4em;
	border: 1px solid blue;
	position: relative;
	bottom: 0;
	right: 0;
}
</style>

<script>
const outerRect = document.getElementById('outer').getClientRects()[0];
const innerRect = document.getElementById('inner').getClientRects()[0];

const scrollWidth = outerRect.right - innerRect.right;
const scrollHeight = outerRect.bottom - innerRect.bottom;

console.log(scrollWidth, scrollHeight);
</script>