title: Set the length of a horizontal scrollbar
body: <p>It would seem that this would be a duplicate question, however I cannot find anything on it.</p>
  
  <p>I am trying to set the length of a scrollbar to 50% of the <code>&lt;div&gt;</code></p>
  
  <p>I am using webkit to hide the actual scrollbar and show and image instead, however the thumb of the scrollbar goes outside the slidebar <code>img</code> itself. So if i can shorten the scrollbar length it would solve all my issues.</p>
  
  <p>Ideally I would like a webkit fix but am open to other ideas.</p>
  
  <p>currently i have this for the css:</p>
  
  <pre><code>::-webkit-scrollbar-button:start:decrement,
      ::-webkit-scrollbar-button:end:increment  {}
      ::-webkit-scrollbar-thumb:horizontal {
              background:transparent url('images/sliderheart.png') no-repeat; 
              background-size:35px 35px;
  
              width: 35px;
              height: 35px;  
              background-position: center;
      }
      ::-webkit-scrollbar{height: 50px; width: 50px;}
  
  
      ::-webkit-scrollbar-track:horizontal{
      background:transparent url('images/sliderbar.png') no-repeat; 
      background-position: center; 
      }
  </code></pre>