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


要知道捲軸寬度,首先要搞清楚兩個回傳值: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';

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

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

	// Put the inner div in the scrolling div
	// 把內容區塊放到外部大的區塊中

	// Append the scrolling div to the doc
	// 把所有東西加到文件裡

	// 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
	// 用完就丟

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



What is distraction osteogenesis?   2017/8/21 下午 12:59:00

What a material of un-ambiguity and preserveness of valuable knowledge regarding unpredicted emotions.

How do you grow?   2017/8/4 上午 11:37:00

I enjoy looking through a post that will make men and women think.
Also, thanks for allowing for me to comment!

leannarookwood.hatenablog.com   2017/7/31 上午 12:09:00

Link exchange is nothing else except it is only placing
the other person's blog link on your page at proper place and other person will also do similar in favor of you.

What do you do for a strained Achilles tendon?   2017/7/28 上午 10:56:00

Hello there! This is kind of off topic but I need some help from an established blog.
Is it very hard to set up your own blog? I'm not very techincal but
I can figure things out pretty fast. I'm thinking about creating my
own but I'm not sure where to begin. Do you have any ideas or suggestions?

neryhyland.hatenablog.com   2017/7/22 下午 12:31:00

Hello! This is my first visit to your blog! We are a team of
volunteers and starting a new initiative in a community in the same
niche. Your blog provided us useful information to work on. You have done a marvellous job!

What is leg length discrepancy?   2017/7/16 上午 01:04:00

Hello there! Do you know if they make any plugins to help with
SEO? I'm trying to get my blog to rank for some targeted keywords but I'm not seeing very good success.
If you know of any please share. Kudos!

Isla   2017/7/7 下午 01:50:00

My coder is trying to persuade me to move to .net from PHP.
I have always disliked the idea because of the costs.

But he's tryiong none the less. I've been using
Movable-type on various websites for about a year and am worried about switching to another platform.
I have heard fantastic things about blogengine.net.
Is there a way I can transfer all my wordpress content into it?
Any help would be greatly appreciated!

diabetes an foot pain   2017/7/4 下午 03:36:00

Thanks for finally talking about >【卜維丰】視窗捲軸寬度 vs cientWidth, offsetWidth <Liked it!

how to stop a foot pain   2017/7/3 上午 11:17:00

Sweet blog! I found it while browsing on Yahoo News.
Do you have any tips on how to get listed in Yahoo News?
I've been trying for a while but I never seem to get there!
Many thanks

foot pain during running   2017/7/2 下午 04:49:00

We are a gaggle of volunteers and starting a new
scheme in our community. Your web site offered us with valuable information to
work on. You've done a formidable process
and our whole community will likely be thankful to you.

   2017/6/24 下午 08:11:00

I leave a response when I like a post on a site or if I have something to valuable to contribute
to the discussion. It's a result of the fire communicated in the article I read.

And on this article 【卜維丰】視窗捲軸寬度 vs
cientWidth, offsetWidth. I was moved enough to drop a
comment :) I do have a few questions for you if it's okay.

Could it be simply me or does it look like like some of the comments look like written by brain dead individuals?
:-P And, if you are posting at other places, I would like
to follow you. Would you make a list the complete urls of your shared
pages like your twitter feed, Facebook page or linkedin profile?

margueritebreda.wordpress.com   2017/5/21 上午 11:18:00

Fantastic beat ! I wish to apprentice while you amend your web
site, how could i subscribe for a blog website? The account helped
me a acceptable deal. I had been tiny bit acquainted of this your broadcast offered bright clear concept

manicure   2017/5/4 上午 04:13:00

I am really delighted to read this blog posts which contains tons
of helpful facts, thanks for providing these kinds of statistics.

manicure   2017/4/11 下午 06:28:00

Howdy, i read your blog from time to time and i own a similar one and i
was just curious if you get a lot of spam responses?
If so how do you reduce it, any plugin or anything you can recommend?
I get so much lately it's driving me crazy so any assistance is very much appreciated.

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


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