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

js

JavaScriptでスクロールバーの幅を取得したいと思ったのでさくっと書いてみた。

スクロールバーが表示されるiframeを生成して、offset〜を取得することで、iframeサイズとの差がスクロールバーの幅となることを利用して計算します。

IE7ではDOMの構築が終わっておらず正常に計算できませんが、僕はFxとChromeでしか使わないので、問題なしです。

function scrollBarSize() {
	var W = 1000, H = 1000;

	var iframe = document.createElement("iframe");
	    iframe.frameBorder = 0;
	    iframe.width = W;
	    iframe.height = H;

	with (iframe.style) {
		position = "absolute";
		top = "0px";
		left = "-" + (W * 2) + "px";
	}

	document.body.appendChild(iframe);
	var win = iframe.contentWindow,
	    doc = win.document;
	doc.open();
	doc.write('<!DOCTYPE html><html><head><style type="text/css">html,body,div{margin:0;padding:0;}div{width:'+(W*2)+'px;height:'+(H*2)+'px;}</style></head><body><div></div></body></html>');
	doc.close();

	var res = {
		width: W - doc.documentElement.clientHeight,
		height: H - doc.documentElement.clientWidth
	};

	document.body.removeChild(iframe);

	return res;
}