スクロールバーをcssで擬似的に隠す

スクロールバーを非表示にしつつ、スクロール機能可能なように、スクロール部分のみ隠す。
スクロールエリアと同じサイズのDIVにoverflow: hidden;をかけ、スクロールエリアにはマージンを付け足す。

■html

<div id="wrap">
  <div id="inner">
    <h1>スクロール出来ます。</h1>
    <p>あああああああ</p>
    <p>あああああああ</p>
    <p>あああああああ</p>
    <p>あああああああ</p>
    <p>あああああああ</p>
    <p>あああああああ</p>
    <p>あああああああ</p>
    <p>あああああああ</p>
    <p>あああああああ</p>
  </div>
</div>

■css

#wrap {
     width: 300px;
     height: 300px;
     overflow: hidden;
     border: solid 1px #ddd;
}
#inner {
     width: 300px;
     height: 300px;
     padding-right: 30px;
     overflow: scroll;
}