js获得横向滚动条滑块长度

function getScrollbarWidth() {
  const outer = document.createElement('div');
  outer.style.visibility = 'hidden';
  outer.style.width = '100px';
  outer.style.msOverflowStyle = 'scrollbar'; // needed for WinJS apps
  document.body.appendChild(outer);

  const widthNoScroll = outer.offsetWidth;
  // force scrollbars
  outer.style.overflow = 'scroll';

  // add innerdiv
  const inner = document.createElement('div');
  inner.style.width = '100%';
  outer.appendChild(inner);

  const widthWithScroll = inner.offsetWidth;

  // remove divs
  outer.parentNode.removeChild(outer);

  return widthNoScroll - widthWithScroll;
}

console.log('Scrollbar width:', getScrollbarWidth());

function getHorizontalScrollbarWidth() {
  const element = document.documentElement;
  const style = window.getComputedStyle(element);
  const scrollbarWidth = element.clientWidth - parseInt(style.width, 10);
  return scrollbarWidth;
}

console.log('Horizontal scrollbar width:', getHorizontalScrollbarWidth());

function getAccurateScrollbarWidth() {
  return new Promise((resolve) => {
    requestAnimationFrame(() => {
      resolve(getHorizontalScrollbarWidth());
    });
  });
}

getAccurateScrollbarWidth().then((width) => {
  console.log('Accurate scrollbar width:', width);
});