Scrollbar width setter and listener

behaviors.js

const setScrollbarWidth = () => {
  const htmlEl = document.documentElement;
  const scrollbarWidthLabel = '--scrollbar-width';
  let scrollbarWidth;

  // Get CSS value as an integer, will be set to 0 or a number followed by px, e.g. '20px'
  const scrollbarWidthValue =
    htmlEl.style.getPropertyValue(scrollbarWidthLabel).length > 0 ?
      parseInt(htmlEl.style.getPropertyValue(scrollbarWidthLabel).split('px')[0]) :
      undefined;

  // We have vertical scroll
  if (htmlEl.scrollHeight > htmlEl.clientHeight) {
    const storedScrollbarWidth = htmlEl.dataset.scrollbarWidth ? parseInt(htmlEl.dataset.scrollbarWidth) : undefined;

    // Get the scrollbar width once
    if (typeof storedScrollbarWidth === 'undefined') {
      // Cheap wayof getting scrollbar width, but is a little faulty
      scrollbarWidth = window.outerWidth - window.innerWidth;

      // More expensive way if the faulty way is sus
      if (scrollbarWidth > 50) {
        scrollbarWidth = window.innerWidth - htmlEl.offsetWidth;
      }

      htmlEl.dataset.scrollbarWidth = scrollbarWidth;
    }
    else {
      scrollbarWidth = storedScrollbarWidth;
    }

    // Update if we need to
    if (scrollbarWidthValue !== scrollbarWidth) {
      htmlEl.style.setProperty(scrollbarWidthLabel, `${scrollbarWidth}px`);
    }
  }
  else if (scrollbarWidthValue !== 0) {
    htmlEl.style.setProperty(scrollbarWidthLabel, '0');
  }
};
setScrollbarWidth();
document.addEventListener('load', setScrollbarWidth);
//  Backdrop.optimizedResize.add(setScrollbarWidth, 'setScrollbarWidth');