title: how to change width of scrollbar-track (line under ScrollBar)
body: <p>I want to code scrollbar like this design:</p>
  <p><a href="https://i.stack.imgur.com/KTUbL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KTUbL.png" alt="enter image description here" /></a></p>
  <p>it means width of <code>-webkit-scrollbar-thumb</code> must <code>5px</code> and width of <code>-webkit-scrollbar-track</code> must <code>2px</code> but i can't change width of <code>-webkit-scrollbar-track</code> independent of <code>-webkit-scrollbar-thumb</code>.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.main {
  width: 100px;
  height: 100px;
  max-height: 100px;
  background-color: #fff;
  border: 1px solid red;
  overflow-y: auto;
  }
  
  /* Scrollbar */
  
  /* width */
  ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: #dddddd;
    /*box-shadow: inset 0 0 5px #dddddd;*/
    border-radius: 4px;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #9e9e9e;
    border-radius: 4px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="main"&gt;
   &lt;div&gt;test&lt;/div&gt;
   &lt;div&gt;test&lt;/div&gt;
   &lt;div&gt;test&lt;/div&gt;
   &lt;div&gt;test&lt;/div&gt;
   &lt;div&gt;test&lt;/div&gt;
   &lt;div&gt;test&lt;/div&gt;
   &lt;div&gt;test&lt;/div&gt;
   &lt;div&gt;test&lt;/div&gt;
   &lt;div&gt;test&lt;/div&gt;
   &lt;div&gt;test&lt;/div&gt;
   &lt;div&gt;test&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>