2012年10月4日木曜日

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

各種レイアウトの微調整を行う際,スクロールバーの幅を取得したくなる.こんなものjavascriptで一発取得したいところだけれど,ちょっと工夫しないと上手く行かない.なので,共通モジュール化しておくと何かと便利かもしれない.


以前公開したものはjQueryに依存していたので,domだけを使って書きなおした.
window.onload後でないと正しく動かないので注意して下さい.

//スクロールバーの幅を取得
function getBarWidth(){
 var body = document.body;
 var outer = document.createElement("div");
 var style = outer.style;
 style.width = "100px";
 style.height = "100px";
 style.overflow = "scroll";
 style.border = "none";
 style.visibility = "hidden";
 var inner = outer.cloneNode(false);
 outer.appendChild(inner);
 document.body.appendChild(outer);
 outer.scrollTop = 200;
 var barWidth = outer.scrollTop;
 body.removeChild(outer);
 return barWidth;
}

要するに同じ大きさのblock要素を重ねてそのズレを取得している訳です.
環境毎にスクロールバーの幅は変化するので面倒ですね.

0 件のコメント:

コメントを投稿