Scrollbar width setter and listener - has Backrop utility functions

scrollbar-width.js

/**
 * Gets the width of the scrollbar and sets it to a CSS Custom Property
 */
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');
  }
}

document.addEventListener('DOMContentLoaded', setScrollbarWidth);
document.addEventListener('load', () => {
  setScrollbarWidth();

  // Add a coarse resize listener to update the scrollbar width
  // (essentially if there is one or not, and if so, how wide)
  const debouncedCallback = Backdrop.debounce(setScrollbarWidth, 1000);
  window.addEventListener('resize', debouncedCallback);
});