Edit in JSFiddle

<div id="a">
  margin-right: -17px
  <div class="outer">
    <div class="inner">
      <div class="content">
        <span class="line"/>
      </div>
    </div>
  </div>
  <div class="hint"><span class="line"/></div>
</div>
<div id="b">
  width: 105% &gt; width: 95.24% (もしくは padding-right: 5%)
  <div class="outer">
    <div class="inner">
      <div class="content">
        <span class="line"/>
      </div>
    </div>
  </div>
  <div class="hint"><span class="line"/></div>
</div>
<div id="c">
  position: relative/absolute/fixed &gt; position: absolute; right: -17px; top/left/bottom: 0;
  <div class="outer">
    <div class="inner">
      <div class="content">
        <span class="line"/>
      </div>
    </div>
  </div>
  <div class="hint"><span class="line"/></div>
</div>
<pre>
http://ja.stackoverflow.com/a/22354/ 用のサンプル

黒い縦線は text-align: center の中央を表しています。
ボックスの外に書かれた線がウィンドウの中心なので、ボックスの中の線と比較してみてください。

スクロールバーの幅（主にOSによって違う？）やウィンドウ幅によって結果は変化します。
</pre>

.outer { height: 100px; }
.inner { height: 100%; }

#a .outer { overflow-x: hidden;}
#a .inner { overflow-y: scroll; margin-right: -17px; }
#a .content { }

#b .outer { overflow-x: hidden;}
#b .inner { overflow-y: scroll; width:105%; }
#b .content { width: 95.24%; }

#c .outer { overflow-x: hidden; position: relative; }
#c .inner { overflow-y: scroll; position: absolute; right: -17px; left: 0; top:0;bottom:0; }
#c .content { }

/* common styles */

div { box-sizing: border-box; }
.hint { height: 25px; text-align: center; }
.line { display: inline-block; width: 1px; height: 100%; background: black; }
.outer, .inner, .content { padding: 0.5em 0; }
.outer { background: #beb; }
.inner { background: #ebb; }
.content { background: #bbe; height: 200px; text-align: center; }