get the scrollbar sizes

scrollbar-widths.js

function mockScollport() {
  const scrollport = document.createElement('div')

  scrollport.style.position = 'absolute'
  scrollport.style.top = '-100dvh'
  scrollport.style.left = '-100vw'
  scrollport.style.width = '100px'
  scrollport.style.height = '100px'
  scrollport.style.overflow = 'scroll'
  scrollport.style.visibility = 'hidden'

  return scrollport
}

function determineScrollbarSize() {
  const inner = document.createElement('div')
  inner.style.width = '100%'
  inner.style.height = '200px'

  const scrollport = mockScollport()
  scrollport.style.scrollbarWidth = 'auto'
  const scrollportThin = mockScollport()
  scrollportThin.style.scrollbarWidth = 'thin'

  document.body.appendChild(scrollport)
  document.body.appendChild(scrollportThin)

  scrollport.appendChild(inner)
  const scrollbarWidth = scrollport.offsetWidth - inner.offsetWidth
  document.firstElementChild.style.setProperty('--scrollbar-size', `${scrollbarWidth}px`)
  document.body.removeChild(scrollport)

  scrollportThin.appendChild(inner)
  const scrollbarThinWidth = scrollportThin.offsetWidth - inner.offsetWidth
  document.firstElementChild.style.setProperty('--scrollbarThin-size', `${scrollbarThinWidth}px`)
  document.body.removeChild(scrollportThin)
}

document.addEventListener('DOMContentLoaded', determineScrollbarSize)