【卜維丰】視窗捲軸寬度 vs cientWidth, offsetWidth

視窗捲軸寬度 vs cientWidth, offsetWidth

9/14 10'

scrollbars 瀏覽視窗捲軸的寬度，一直是許多人好奇的資料。如果你像我這麼荷求「置中」就是要放在視窗中間，連捲軸寬度也要算進去的話。

要知道捲軸寬度，首先要搞清楚兩個回傳值：clientWidth 和 offsetWidth，先看下面的實作

上列，有個灰色區塊，CSS 指定的內容是：width:300px;height:150px;padding:0px;現在，這時，這個區塊的 clientWidth 和 offsetWidth 都是 300。

當勾選了 border:#000 1x solid; 時，clientWIdth 仍為 300，offsetWidth 則變為 302。這代表，offsetWidth 會加上線框寬度。

當再勾選了 padding:6px 時，clientWidth 變成 312，offsetWidth 則變為 314，這代表，這兩個值都會加上 padding 的值。

當再勾選了 margin:10px 時，仍保持 clientWidth=312，offsetWidth=314 不變，這代表，margin 不影響這兩個值。

以上的結果，在 FireFox 3.6、Google Chrome 6.0、Safari (Window) 5.0 、Opera 10、Internet Explorer 8 中都有相同的表現(注意 DOCTYPE 為 xhtml1-transitional.dtd)。

由以上的測試顯示，clientWidth 著重的是區塊內容(padding、margin 和 border 都是向區塊外增加數值，只有舊版 Internet Explorer 或 IE 在 Quirk 模式下才有問題)，而 offsetWidth 則是整體區塊的大小。

接著實作，再按區塊上顯示內容，在這個例子裡，置入了很多文字，導致區塊會產生捲軸，這時，在有內容，同時 padding 不存在時，clientWidth 的值變成，沒有內容時，值則為，那兩者之間的差就是捲軸寬度了。

基於這個原理，想偵測使用者的捲軸寬度時，就是增加一個區塊，讓區塊中包含了過多的內容，檢查區塊有內容和沒內容時的差距就是捲軸寬度了(用 clientWIdth 或 offsetWidth 均可，而且不用管有沒有 padding 或 border)。程式碼如下(這份程式碼非我原創，我只是作了點小修改，原出處不詳，為了尊重原創者，原始英文註解保留，我另加中文註解)：

function getScrollerWidth() {
	var scr = null;
	var inn = null;
	var wNoScroll = 0;
	var wScroll = 0;

	// Outer scrolling div
	// 建立外部大的區塊
	scr = document.createElement('div');
	scr.style.position = 'absolute';
	scr.style.top = '-1000px';
	scr.style.left = '-1000px';
	scr.style.width = '100px';
	scr.style.height = '50px';
	scr.padding='0px';
	scr.margin='0px';

	// Start with no scrollbar
	// 一開始是沒有捲軸的區塊
	scr.style.overflow = 'hidden';

	// Inner content div
	// 區塊中放進資料(一個比區塊還大的div)
	inn = document.createElement('div');
	inn.style.width = '100%';
	inn.style.height = '200px';
	inn.padding='0px';
	inn.margin='0px';

	// Put the inner div in the scrolling div
	// 把內容區塊放到外部大的區塊中
	scr.appendChild(inn);

	// Append the scrolling div to the doc
	// 把所有東西加到文件裡
	document.getElementsByTagName('html')[0].appendChild(scr);

	// Width of the inner div sans scrollbar
	// 取得沒有區軸時的寬度
	wNoScroll = inn.offsetWidth;

	// Add the scrollbar
	// 加上捲軸
	scr.style.overflow = 'auto';

	// Width of the inner div width scrollbar
	// 取得有捲軸的寬度
	wScroll = inn.offsetWidth;

	// Remove the scrolling div from the doc
	// 用完就丟
	document.getElementsByTagName('html')[0].removeChild(document.getElementsByTagName('html')[0].lastChild);

	// Pixel width of the scroller
	// 回傳捲軸值
	return (wNoScroll - wScroll);
}

同意轉載，不過麻煩看一下轉載需知

Martina 2010/12/24 下午 10:56:00

很實用喔!

卜維丰 2010/11/23 上午 08:52:00

果汁, 不妨把你測到的大小, 直接設到 CSS 中 body 的 width

果汁 2010/11/18 下午 05:42:00

取得了捲軸寬度後, 要如何設定才能讓畫面不論是否有無出現捲軸, 都不會偏移呢? 我是一開始就先用一個table放東西, 然後在table的屬性中加上align=center, 當table裡的東西超過一面時, 下拉捲軸出現, 畫面就會稍偏左, 不超過一面的話, 就沒捲軸, 畫面就偏右...挺傷腦筋的..不知前輩有無解決方法呢? 謝謝~

Kei 2010/9/16 上午 10:56:00

Good!

給個回應

姓名:
佈落格網址:
	如果您是要發問問題, 最好有個問題測試的網址, 這樣比較容易找到您問題所在, 謝謝
內容:

以下為本站文章分類清單

以下為本站側欄內容

以下為最近發表的文章

以下為本頁本文內容

視窗捲軸寬度 vs cientWidth, offsetWidth

以下為文章回應區