title: CSS webkit scrollbar show/hide
body: <p>I'm using -webkit-scrollbar and what I want to happen is the scrollbar hidden on page load, and it stays hidden until you hover over the container div it is attached to. When you are hovering over a scrollable area, it would appear.</p>
  
  <p>I tried adding :hover and :focus affects to various divs and rules in my CSS with no luck.</p>
  
  <p>Is there a way to do what I'm referring to using -webkit-scrollbar? I could post code, but its pretty straightforward. Just one outer div with the css rules attached to it, then one inner div with set height and width. Then the css rules for -webkit-scrollbar.</p>
  
  <pre><code>#u #trail ::-webkit-scrollbar {
      width: 9px;
      height: 9px;
  }
  #u #trail ::-webkit-scrollbar-button:start:decrement,
  #u #trail ::-webkit-scrollbar-button:end:increment {
      display: block;
      height: 0;
      background-color: transparent;
  }
  #u #trail ::-webkit-scrollbar-track-piece {
      background-color: #FAFAFA;
      -webkit-border-radius: 0;
      -webkit-border-bottom-right-radius: 8px;
      -webkit-border-bottom-left-radius: 8px;
  }
  #u #trail ::-webkit-scrollbar-thumb:vertical {
          height: 50px;
          background-color: #999;
          -webkit-border-radius: 8px;
  }
  #u #trail ::-webkit-scrollbar-thumb:horizontal {
      width: 50px;
      background-color: #999;
      -webkit-border-radius: 8px;
  }
  #u #trail-overflow {
      width: 860px;
      max-height: 500px;
     overflow: auto;
  }
  </code></pre>