スクロールバーの幅を取得するには？

質問

対象はIE6～8です。
CSSの overflow-y: scroll; で表示される垂直スクロールバーについてなのですが、
これは対象領域の横幅がスクロールバーの横幅よりも細いと、スクロールできなくなります。
（使用不可のグレー表示になります）
ある機能を実現するために、スクロールバーだけを独立して表示させたかったので、
ぎりぎりの横幅（18px）を指定していたのですが、問題が起きました。

デスクトップでの右クリックから開ける「画面のプロパティ」→「デザイン」で、
フォントサイズを変更したり、あるいは詳細設定でDPIを変更すると、
スクロールバーの幅が変わってしまうために、「ぎりぎりの横幅」も変わってしまいます。
それにより、18pxの指定ではグレー表示となり動かせなくなりました。

この解決策を求めています。
現状としては、JavaScriptでスクロールバーの幅を取得できれば、
初期表示時に補正できるので、一番手軽と考えているのですが・・・
よろしくお願い致します。

回答No.2

Chaire · ベストアンサー

<offsetWidth> = <clientWidth> + <border-(left|right)-width> + <スクロールバー幅>
<clientWidth> = <width> + <padding-(top|bottom)> - <スクロールバー幅>

※CSS の実装方向にもよりますが、現行主要ブラウザはこの関係が成立します。

お礼

素晴らしい情報です。
これで解決できそうです。
ありがとうございました。

回答No.1

satomi3951

スクロールバーだけ表示したいって事は、スライダーが欲しいって事じゃないでしょうか？
jQueryUIのスライダーとかどうでしょう？
http://jqueryui.com/

あるいは、fleXcroll等で、スクロールバーのデザインを自分で変えてしまえば、
常に同じサイズになりませんか？
http://www.hesido.com/web.php?page=customscrollbar

参考URL：

http://jqueryui.com/

お礼

回答ありがとうございます。
質問内容が分かりにくく申し訳ありません。

Excelの「ウィンドウ枠を固定」と同様のことをHTML/JavaScriptベースで実現するために、
複数のTABLEを配置し、独立表示させたスクロールバーで同期させるという力技を、
更にパラメータによって表の数や連動対象も変更できるよう動的に生成しながらやっているため、
「スクロール部品をごっそり別のものに変える」という選択が、今となっては困難なのです。
せっかく教えて頂いたのに、申し訳ありません。

補足：単純に横幅を18pxより大きくするのではダメな理由
スクロールバーは表の右側に接するように表示させています。
これより大きな横幅にすると、表から離れてしまいます。
CSSのleftで表示位置を補正すれば良いのですが、
その補正値の算出には「現在のスクロールバーの太さ」の値が必要になります。

詳細情報が後だしになってしまい、申し訳ありませんでした。