title: CSS: Possible to "push" Webkit scrollbars into content?
body: <p>Normally a scrollbar is positioned like this:</p>
  
  <pre><code>________________________________________
  |                          |           |
  |         content          | scrollbar |
  |                          |           |
  |                          |           |
  |                          |           |
  |                          |           |
  |__________________________|___________|
  </code></pre>
  
  <p>I'm basically looking to have a gap between a "custom" scrollbar and the outer boundary of a scrollable container:</p>
  
  <pre><code>________________________________________
  |                    |           |     |
  |      content       | scrollbar | gap |
  |                    |     &lt;     |     | 
  |                    |           |     |
  |                    |           |     |
  |                    |           |     |
  |____________________|___________|_____|
  </code></pre>
  
  <p>Using a <code>margin-right</code> on either <code>::-webkit-scrollbar</code> or <code>::-webkit-scrollbar-track-piece</code> fails and the announcement of the style–able scrollbars for Webkit states:</p>
  
  <blockquote>
    <p>Margins are supported along the axis of the scrollbar. They can be
    negative (so that the track can for example be inflated to cover the
    buttons partially).</p>
  </blockquote>
  
  <p>I'm now wondering if anyone has managed to push the scrollbars "into" the content (or out of the wrapper for that matter) by some other means than <code>margin</code>. </p>
  
  <p>I'm assuming that this might be possible only (if even) using some kind of trick — any ideas?</p>
  
  <p>Other things I've tried unsuccessfully are <code>padding-right: 10px</code> and <code>border-right: 10px solid rgba(255, 255, 255, 0)</code> (a transparent border).</p>