CSS

set scrollbar width css

::-webkit-scrollbar {
    width: 2em;
    height: 2em
}
::-webkit-scrollbar-button {
    background: #ccc
}
::-webkit-scrollbar-track-piece {
    background: #888
}
::-webkit-scrollbar-thumb {
    background: #eee
}​

css scrollbar width

/* The syntax, with all the available styling */
(selected-element)::-webkit-scrollbar {
  width: 16px;
  background: transparent;
  display: none;
}
(selected-element)::-webkit-scrollbar-track {
  background: whitesmoke;
  border-radius: 3px;
}
(selected-element)::-webkit-scrollbar-thumb {
  background: tomato;
  border-radius: 10px;
}

/* A modern way of doing this */
selected-element {
  scrollbar-width: thin; /* 'thin' or any usual number measurements like '5px' */
  scrollbar-color: <thumb-color> <track-color>; /* Use normal color system i.e rgb or hex or hsl */
}

get scrollbar width css

let scrollbarWidth = (window.innerWidth - document.body.clientWidth) + 'px';

scrollbar width css

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}