以下為本站文章分類清單

  1. AJAXspacer
  2. ASPspacer
  3. CSSspacer
  4. Javascriptspacer
  5. Windows 應用程式spacer
  6. 網頁設計
  7. 評論、短文、雜文spacer
  8. 版主spacer
  9. 最新回應spacer

以下為本頁本文內容

視窗捲軸寬度 vs cientWidth, offsetWidth

9/14 10' icon

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

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




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!

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