使用JavaScript实现自定义滚动条

<div id="scroll-container">
  <div id="content">
    
  div>
div>

#scroll-container {
  width: 100%;
  height: 300px;
  overflow: hidden;
  position: relative;
}
#scroll-container #content {
  width: calc(100% + 17px);
  height: calc(100% + 17px);
  overflow: auto;
  padding-right: 17px;
}
#scroll-container::-webkit-scrollbar {
  width: 10px;
}

#scroll-container::-webkit-scrollbar-track {
  background: #fff;
}

#scroll-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
}

const container = document.getElementById('scroll-container');
const content = document.getElementById('content');

const getScrollBarWidth = () => {
  const div = document.createElement('div');
  const outerDiv = document.createElement('div');

  outerDiv.style.position = 'absolute';
  outerDiv.style.top = '-9999px';
  outerDiv.style.width = '50px';
  outerDiv.style.height = '50px';
  outerDiv.style.overflow = 'scroll';

  div.style.width = '100px';
  div.style.height = '100px';

  outerDiv.appendChild(div);
  document.body.appendChild(outerDiv);

  const width = outerDiv.offsetWidth - outerDiv.clientWidth;

  document.body.removeChild(outerDiv);

  return width;
};

const scrollBarWidth = getScrollBarWidth();

container.style.paddingRight = `${scrollBarWidth}px`;