JavaScript位置與大?。?）之正確理解和運(yùn)用與尺寸大小相關(guān)的DOM屬性

更新時(shí)間：2015年12月26日 11:09:13 投稿：mrr

這篇文章主要介紹了JavaScript位置與大?。?）——正確理解和運(yùn)用與尺寸大小相關(guān)的DOM屬性的相關(guān)資料,需要的朋友可以參考下

在web開(kāi)發(fā)中，不可避免遇到要計(jì)算元素大小以及位置的問(wèn)題，解決這類問(wèn)題的方法是利用DOM提供的一些API結(jié)合兼容性處理來(lái)，所有內(nèi)容大概分3篇左右的文章的來(lái)說(shuō)明。本文作為第一篇，介紹DOM提供的與尺寸大小相關(guān)的DOM屬性，提供一些兼容性處理的方法，并結(jié)合常見(jiàn)的場(chǎng)景說(shuō)明如何正確運(yùn)用這些屬性。

1. 正確理解offsetWidth、clientWidth、scrollWidth及相應(yīng)的height屬性

假設(shè)某一個(gè)元素的橫縱向滾動(dòng)條都拖動(dòng)到最末端，則offsetWidth、clientWidth、scrollWidth等屬性相應(yīng)的范圍如下圖所示：

1）offsetWidth ，offsetHeight對(duì)應(yīng)的是盒模型的寬度和高度，這兩個(gè)值跟我們使用chrome審查元素時(shí)看到的尺寸一致：

2）scrollWidth，與scrollHeight對(duì)應(yīng)的是滾動(dòng)區(qū)域的寬度和高度，但是不包含滾動(dòng)條的寬度！滾動(dòng)區(qū)域由padding和content組成。

3）clientWidth，clientHeight對(duì)應(yīng)的是盒模型除去邊框后的那部分區(qū)域的寬度和高度，不包含滾動(dòng)條的寬度。

4）任何一個(gè)DOM元素，都可以通過(guò)以下api快速得到offsetWidth，clientWidth，scrollWidh及相關(guān)的height屬性：

//domE為一個(gè)DOM Html Element對(duì)象
domE.scrollWidth
domE.scrollHeight
domE.clientWidth
domE.clientHeight
domE.offsetWidth
domE.offsetHeight
//domE為一個(gè)DOM Html Element對(duì)象
domE.scrollWidth
domE.scrollHeight
domE.clientWidth
domE.clientHeight
domE.offsetWidth
domE.offsetHeight

5）這些屬性在現(xiàn)代瀏覽器包括pc和mobile上幾乎沒(méi)有兼容性問(wèn)題，可以放心使用。如果你想了解詳細(xì)的兼容性規(guī)則，可以參考下面的2篇文章：

W3C DOM Compatibility – CSS Object Model View

cssom視圖模式cssom-view-module相關(guān)整理與介紹

下面針對(duì)普通html元素，html根元素和body元素的以上相關(guān)屬性一一測(cè)試，以便驗(yàn)證前面的結(jié)論，總結(jié)一些可在實(shí)際編碼過(guò)程中直接使用的經(jīng)驗(yàn)技巧。之所以要區(qū)分普通html元素，html根元素和body元素，是因?yàn)榍懊娴睦碚摚趆tml根元素和body元素會(huì)有一些怪異之處，需要小心處理。

注：

1、為了減少篇幅，測(cè)試貼出的代碼不是完整的代碼，但不影響學(xué)習(xí)參考，另外文中給出的測(cè)試結(jié)果都是在chrome（版本：45.0）下運(yùn)行得出的，在測(cè)試結(jié)果有差異的情況下，還會(huì)給出IE9，IE10，IE11，firefox（版本：42.0），opera（版本：34.0）的測(cè)試結(jié)果，沒(méi)有差異的會(huì)在測(cè)試結(jié)果中說(shuō)明，不考慮IE8及以下。

2、safari因?yàn)樵O(shè)備限制暫不測(cè)試，另外它跟chrome內(nèi)核相同，對(duì)標(biāo)準(zhǔn)支持的可靠性差不到哪去。

3、老版本的chrome,firefox,opera也因?yàn)樵O(shè)備的限制無(wú)法測(cè)試，不過(guò)從瀏覽器對(duì)標(biāo)準(zhǔn)的支持程度考慮，這三個(gè)瀏覽器在很早的版本開(kāi)始對(duì)W3C的標(biāo)準(zhǔn)都是比較規(guī)矩的，加之這些瀏覽器更新?lián)Q代的速度較快，現(xiàn)在市面上這些瀏覽器主流的版本也都是較新的。

4、由于不考慮IE8及以下，同時(shí)html現(xiàn)在都用html5，所以document.compatMode = ‘BackCompat' 的情況不考慮。不過(guò)盡管BackCompat模式是IE6類的瀏覽器引出的，但是對(duì)于chrome，firefox等也存在document.compatMode = ‘BackCompat' 的情況，比如下面的這個(gè)網(wǎng)頁(yè)，你用chrome打開(kāi)，并且在console中打印document.compatMode，你會(huì)發(fā)現(xiàn)它的值也是BackCompat（原因跟該頁(yè)面用的是html4.0的dtd有關(guān)，如果換成html4.01的dtd就不會(huì)在chrome和firefox里出現(xiàn)該情況了）：

http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/compatModeCompat.htm
更多關(guān)于compatMode的知識(shí)，你可以通過(guò)下面的幾個(gè)資源學(xué)習(xí)：

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/compatMode

https://msdn.microsoft.com/en-us/library/ms533687(VS.85).aspx

http://www.cnblogs.com/uedt/archive/2010/09/21/1832402.html

測(cè)試一、驗(yàn)證普通html元素（非body及html根元素）的offsetWidth、clientWidth、scrollWidth及相關(guān)height屬性：

<style type="text/css">
  html,
  body {
    margin: 0;
  }
  body {
    padding: 100px;
  }
  .box {
    overflow: scroll;
    width: 400px;
    height: 300px;
    padding: 20px;
    border: 10px solid #000;
    margin: 0 auto;
    box-sizing: content-box;
  }
  .box-2 {
    border: 1px solid #000;
  }
</style>
<body>
  <div class="box">
    <div class="box-2">...</div>
  </div>
</body>
<script type="text/javascript">
var boxE = document.querySelectorAll('.box')[0];
console.log('scrollWidth:' + boxE.scrollWidth);
console.log('scrollHeight:' + boxE.scrollHeight);
console.log('clientWidth:' + boxE.clientWidth);
console.log('clientHeight:' + boxE.clientHeight);
console.log('offsetWidth :' + boxE.offsetWidth);
console.log('offsetHeight:' + boxE.offsetHeight);
</script>
<styletype="text/css">
  html,
  body{
    margin: 0;
  }
  body{
    padding: 100px;
  }
  .box{
    overflow: scroll;
    width: 400px;
    height: 300px;
    padding: 20px;
    border: 10px solid #000;
    margin: 0 auto;
    box-sizing: content-box;
  }
  .box-2{
    border: 1px solid #000;
  }
</style>
<body>
  <divclass="box">
    <divclass="box-2">...</div>
  </div>
</body>
<scripttype="text/javascript">
var boxE = document.querySelectorAll('.box')[0];
console.log('scrollWidth:' + boxE.scrollWidth);
console.log('scrollHeight:' + boxE.scrollHeight);
console.log('clientWidth:' + boxE.clientWidth);
console.log('clientHeight:' + boxE.clientHeight);
console.log('offsetWidth :' + boxE.offsetWidth);
console.log('offsetHeight:' + boxE.offsetHeight);
</script>

在這個(gè)例子中，box元素有400*300的寬高，20px的padding和10px的border，chrome下對(duì)應(yīng)的盒模型：

js執(zhí)行結(jié)果：

從盒模型與js執(zhí)行結(jié)果可知：

1）offsetWidth與offsetHeight與chrome審查元素看到的尺寸完全一致；

2）clientWidth與clientHeight分別等于offsetWidth與offsetHeight減掉相應(yīng)邊框（上下共20px，左右共20px）和滾動(dòng)條寬度后的值（chrome下滾動(dòng)條寬度為17px）；

3）對(duì)于scrollWidth由于沒(méi)有發(fā)生橫向的溢出，同時(shí)由于overflow: scroll的原因，scrollWidth 跟clientWidth相同，但是沒(méi)有包含滾動(dòng)條的寬度，這也驗(yàn)證了前面提出的結(jié)論；

4）對(duì)于scrollHeight，在這個(gè)例子中，它其實(shí)等于上下padding（共40px） + div.box-2的offsetHeight(1370px)，div.box-2：

5）以上測(cè)試還有一個(gè)css值得注意，就是box-sizing，以上代碼中box-sizing設(shè)置為了content-box，如果把它改成border-box，結(jié)果也是類似的，因?yàn)閛ffsetWidth，clientWidth還有scrollWidth對(duì)應(yīng)的區(qū)域不會(huì)發(fā)生改變。

6）其它瀏覽器運(yùn)行結(jié)果與1-5的結(jié)論一致。

測(cè)試二、驗(yàn)證html根元素和body元素的相關(guān)offset client scroll寬高屬性：

<style type="text/css">
  html,
  body {
    margin: 0;
  }
  body {
    border: 10px solid #D4D2D2;
  }
  .box {
    overflow: scroll;
    width: 400px;
    height: 300px;
    padding: 20px;
    border: 10px solid #000;
    margin: 0 auto;
    box-sizing: content-box;
  }
  .box-2 {
    border: 1px solid #000;
  }
</style>
<body>
  <div class="box">
    <div class="box-2">...</div>
  </div>
  <div class="box">
    <div class="box-2">...</div>
  </div>
  <div class="box">
    <div class="box-2">...</div>
  </div>
  <div class="box">
    <div class="box-2">...</div>
  </div>
</body>
<script>
console.log('docE.scrollWidth:' + document.documentElement.scrollWidth);
console.log('scrollHeight:' + document.documentElement.scrollHeight);
console.log('docE.clientWidth:' + document.documentElement.clientWidth);
console.log('docE.clientHeight:' + document.documentElement.clientHeight);
console.log('docE.offsetWidth :' + document.documentElement.offsetWidth);
console.log('docE.offsetHeight:' + document.documentElement.offsetHeight);
console.log('');
console.log('body.scrollWidth:' + document.body.scrollWidth);
console.log('body.scrollHeight:' + document.body.scrollHeight);
console.log('body.clientWidth:' + document.body.clientWidth);
console.log('body.clientHeight:' + document.body.clientHeight);
console.log('body.offsetWidth :' + document.body.offsetWidth);
console.log('body.offsetHeight:' + document.body.offsetHeight);
</script>
<styletype="text/css">
  html,
  body{
    margin: 0;
  }
  body{
    border: 10px solid #D4D2D2;
  }
  .box{
    overflow: scroll;
    width: 400px;
    height: 300px;
    padding: 20px;
    border: 10px solid #000;
    margin: 0 auto;
    box-sizing: content-box;
  }
  .box-2{
    border: 1px solid #000;
  }
</style>
<body>
  <divclass="box">
    <divclass="box-2">...</div>
  </div>
  <divclass="box">
    <divclass="box-2">...</div>
  </div>
  <divclass="box">
    <divclass="box-2">...</div>
  </div>
  <divclass="box">
    <divclass="box-2">...</div>
  </div>
</body>
<script>
console.log('docE.scrollWidth:' + document.documentElement.scrollWidth);
console.log('scrollHeight:' + document.documentElement.scrollHeight);
console.log('docE.clientWidth:' + document.documentElement.clientWidth);
console.log('docE.clientHeight:' + document.documentElement.clientHeight);
console.log('docE.offsetWidth :' + document.documentElement.offsetWidth);
console.log('docE.offsetHeight:' + document.documentElement.offsetHeight);
console.log('');
console.log('body.scrollWidth:' + document.body.scrollWidth);
console.log('body.scrollHeight:' + document.body.scrollHeight);
console.log('body.clientWidth:' + document.body.clientWidth);
console.log('body.clientHeight:' + document.body.clientHeight);
console.log('body.offsetWidth :' + document.body.offsetWidth);
console.log('body.offsetHeight:' + document.body.offsetHeight);
</script>

在這個(gè)例子中，body下一共有4個(gè)box元素（總高度為360 * 4 = 1440px），body的寬是自適應(yīng)的，body還有10px的border，運(yùn)行結(jié)果如下：

從這個(gè)結(jié)果可以看到：

1）body元素由于10px邊框的原因，所以clientWidth比offsetWidth少了20px，這跟前面提到的理論是一致的，但是不可思議的是body的scrollWidth/scrollHeight竟然等于它的offsetWidth/offsetHeight，scrollWidth/scrollHeight是元素滾動(dòng)區(qū)域的寬高度，按照前面給出的范圍圖來(lái)理解，body的scrollWidth/scrollHeight應(yīng)該小于它的offsetWidth/offsetHeight才對(duì)；

2）docE的scrollWidth跟scrollHeight，應(yīng)該等于body元素的offsetWidth跟offsetHeight，從運(yùn)行結(jié)果來(lái)看，這一點(diǎn)是符合的，但是docE的clientWidth竟然等于它的offsetWidth，按照范圍圖，docE的clientWidth應(yīng)該等于offsetWidth減去滾動(dòng)條寬度才對(duì)。

其它的瀏覽器運(yùn)行結(jié)果與chrome也有較大的差異：

IE11：

1）IE11下body元素沒(méi)有出現(xiàn)chrome下body元素的問(wèn)題

2）IE11下html根元素也有chrome類似的問(wèn)題

IE10，IE9:

1）IE10,9下body元素沒(méi)有出現(xiàn)chrome下body元素的問(wèn)題

2）IE10,9下html根元素也沒(méi)有chrome類似的問(wèn)題

firefox：與IE11運(yùn)行結(jié)果一致。

opera：與chrome運(yùn)行結(jié)果一致，可能是因?yàn)槲疫@個(gè)版本的opera用的跟chrome一樣的webkit內(nèi)核的原因。

看起來(lái)IE9就跟IE10是最正常的，實(shí)在是有點(diǎn)難以理解，網(wǎng)上搜索很久，也沒(méi)有找到相關(guān)資料來(lái)說(shuō)明這些差異，最后也只能采取大膽假設(shè)的方式，猜測(cè)出幾個(gè)能解釋這些問(wèn)題的原因：

1）首先，網(wǎng)頁(yè)整體的滾動(dòng)，跟普通html元素的滾動(dòng)不一樣，普通html元素自身就是滾動(dòng)對(duì)象，但是對(duì)于網(wǎng)頁(yè)來(lái)說(shuō)，滾動(dòng)對(duì)象不一定是html根元素或者body元素。因?yàn)楫?dāng)body內(nèi)容為空時(shí)，body的高度是0，html根元素的高度也是0，如果這個(gè)時(shí)候給html或body加上overflow: scroll的css，會(huì)看到滾動(dòng)條還是出現(xiàn)瀏覽器窗口的右邊跟底邊，所以對(duì)于網(wǎng)頁(yè)整體的滾動(dòng)，理論上，滾動(dòng)對(duì)象應(yīng)該是window，而不是html元素或者body元素！但實(shí)際情況并非如此，就測(cè)試的瀏覽器而言：

對(duì)于IE10，IE9，它的滾動(dòng)對(duì)象是html根元素，所以它們的html根元素的offset會(huì)包含滾動(dòng)條的寬度；

對(duì)于其它瀏覽器，滾動(dòng)對(duì)象是window，所以它們的html根元素的offset不包含滾動(dòng)條的寬度。

2）第二，普通元素發(fā)生滾動(dòng)時(shí)，滾動(dòng)內(nèi)容=它的content區(qū)域+它的padding區(qū)域，當(dāng)網(wǎng)頁(yè)整體滾動(dòng)時(shí)，滾動(dòng)內(nèi)容應(yīng)該是html根元素！但實(shí)際情況也并非如此，就測(cè)試的瀏覽器而言：

對(duì)于IE9，IE10，IE11，firefox，它們的滾動(dòng)區(qū)域是html根元素，所以它們的documentElement的scrollWidth和scrollHeight始終表示網(wǎng)頁(yè)整體的滾動(dòng)區(qū)域大小！

對(duì)于chrome和opera，它們的滾動(dòng)對(duì)象是body元素，所以它們的body的scrollWidth和scrollHeight始終表示網(wǎng)頁(yè)整體的滾動(dòng)區(qū)域大小！

3）第三，瀏覽器始終把documentElement.clientWidth和documentElement.clientHeight描述為網(wǎng)頁(yè)可視區(qū)域除去滾動(dòng)條部分的大小，跟網(wǎng)頁(yè)內(nèi)容沒(méi)有關(guān)系！

以上的這些推斷也并非是毫無(wú)道理，就拿滾動(dòng)對(duì)象和滾動(dòng)區(qū)域來(lái)說(shuō)：chrome下如果要用js滾動(dòng)頁(yè)面到某個(gè)位置，在不使用window.scrollTo的條件下，就必須用document.body.scrollTop = xxx 來(lái)處理，而設(shè)置document.documentElement.scrollTop無(wú)效，說(shuō)明chrome的整體滾動(dòng)區(qū)域是由body的滾動(dòng)區(qū)域決定的；而IE11和火狐下如果要用js滾動(dòng)頁(yè)面到某個(gè)位置，在不使用window.scrollTo的條件下，就必須用document.documentElement.scrollTop = xxx來(lái)處理，設(shè)置document.body.scrollTop無(wú)效，說(shuō)明IE11和火狐的整體滾動(dòng)區(qū)域是由html根元素的滾動(dòng)區(qū)域決定的。

2. 利用JS準(zhǔn)確獲取DOM對(duì)象的大小

常見(jiàn)的場(chǎng)景有：

1）獲取整個(gè)網(wǎng)頁(yè)的可視區(qū)域的大小，不包括滾動(dòng)條

2）獲取整個(gè)網(wǎng)頁(yè)的大小，包括不可見(jiàn)的滾動(dòng)區(qū)域

3）獲取一個(gè)普通html元素的大小

4）判斷元素或網(wǎng)頁(yè)有無(wú)出現(xiàn)滾動(dòng)條

5）計(jì)算滾動(dòng)條的寬度

下面針對(duì)這5個(gè)場(chǎng)景一一說(shuō)明，以下代碼均不考慮IE8及以下，不考慮html4 ，另外請(qǐng)注意viewport的設(shè)置，要保證在移動(dòng)設(shè)備上visual viewport與layout viewport重合。

1）如何獲取整個(gè)網(wǎng)頁(yè)的可視區(qū)域的大小，不包括滾動(dòng)條

document.documentElement.clientWidth;
document.documentElement.clientHeight;
document.documentElement.clientWidth;
document.documentElement.clientHeight;

2）如何獲取整個(gè)網(wǎng)頁(yè)的大小，包括不可見(jiàn)的滾動(dòng)區(qū)域

function pageWidth() {
  var doc = document.documentElement,
    body = document.body;
  if (doc.clientWidth == window.innerWidth) {
    return doc["clientWidth"];
  }
  return Math.max(
    body["scrollWidth"], doc["scrollWidth"],
    body["offsetWidth"], doc["clientWidth"]
  );
}
function pageHeight() {
  var doc = document.documentElement,
    body = document.body;
  if (doc.clientHeight == window.innerHeight) {
    return doc["clientHeight"];
  }
  return Math.max(
    body["scrollHeight"], doc["scrollHeight"],
    body["offsetHeight"], doc["clientHeight"]
  );
}
function pageWidth() {
  var doc = document.documentElement,
    body = document.body;
  if (doc.clientWidth == window.innerWidth) {
    return doc["clientWidth"];
  }
  return Math.max(
    body["scrollWidth"], doc["scrollWidth"],
    body["offsetWidth"], doc["clientWidth"]
  );
}
function pageHeight() {
  var doc = document.documentElement,
    body = document.body;
  if (doc.clientHeight == window.innerHeight) {
    return doc["clientHeight"];
  }
  return Math.max(
    body["scrollHeight"], doc["scrollHeight"],
    body["offsetHeight"], doc["clientHeight"]
  );
}

以上出現(xiàn)的window.innerWidth和window.innerHeight分別用來(lái)獲取網(wǎng)頁(yè)包括滾動(dòng)條的可視區(qū)域的寬高，這也是一個(gè)兼容性不錯(cuò)的方法，不過(guò)從實(shí)際開(kāi)發(fā)情況來(lái)看，我們需要不包括滾動(dòng)條的可視區(qū)域更多一些，所以在前面沒(méi)有單獨(dú)介紹。另外在之前給出的PPK的博客中也有關(guān)于這兩個(gè)屬性的兼容性測(cè)試，可以去了解。

3）如何獲取一個(gè)普通html元素的大小

簡(jiǎn)單方法：

docE.offsetWidth;
docE.offsetHeight;
docE.offsetWidth;
docE.offsetHeight;

利用getBoundingClientRect：

var obj = docE.getBoundingClientRect(),
  elemWidth,
  elemHeight;
if(obj) {
  if(obj.width) {
    elemWidth = obj.width;
    elemHeight = obj.height;
  } else {
    elemWidth = obj.right - obj.left;
    elemHeight = obj.bottom - obj.top;
  }
} else {
  elemWidth = docE.offsetWidth;
  elemHeight = docE.offsetHeight;
}
var obj = docE.getBoundingClientRect(),
  elemWidth,
  elemHeight;
if(obj) {
  if(obj.width) {
    elemWidth = obj.width;
    elemHeight = obj.height;
  } else {
    elemWidth = obj.right - obj.left;
    elemHeight = obj.bottom - obj.top;
  }
} else {
  elemWidth = docE.offsetWidth;
  elemHeight = docE.offsetHeight;
}

getBoundingClientRect將在下篇文章中跟其它與位置有關(guān)的DOM屬性一起再詳細(xì)介紹。

4 ）判斷元素或網(wǎng)頁(yè)有無(wú)出現(xiàn)滾動(dòng)條

function scrollbarState(elem) {
  var docE = document.documentElement,
    body = document.body;
  if (!elem || elem === document || elem === docE || elem === body) {
    return {
      scrollbarX: docE.clientHeight window.innerHeight,
      scrollbarY: docE.clientWidth window.innerWidth
    }
  }
  if (typeof(Element) == 'function' & !(elem instanceof(Element) || !body.contains(elem))) {
    return {
      scrollbarX: false,
      scrollbarY: false
    };
  }
  var elemStyle = elem.style,
    overflowStyle = {
      hidden: elemStyle.overflow == 'hidden',
      hiddenX: elemStyle.overflowX == 'hidden',
      hiddenY: elemStyle.overflowY == 'hidden',
      scroll: elemStyle.overflow == 'scroll',
      scrollX: elemStyle.overflowX == 'scroll',
      scrollY: elemStyle.overflowY == 'scroll'
    };
  return {
    scrollbarX: overflowStyle.scroll || overflowStyle.scrollX || (!overflowStyle.hidden & !overflowStyle.hiddenX && elem.clientWidth elem.scrollWidth),
    scrollbarY: overflowStyle.scroll || overflowStyle.scrollY || (!overflowStyle.hidden && !overflowStyle.hiddenY && elem.clientHeight elem.scrollHeight)
  };
}
function scrollbarState(elem) {
  var docE = document.documentElement,
    body = document.body;
  if (!elem || elem === document || elem === docE || elem === body) {
    return {
      scrollbarX: docE.clientHeight window.innerHeight,
      scrollbarY: docE.clientWidth window.innerWidth
    }
  }
  if (typeof(Element) == 'function' & !(eleminstanceof(Element) || !body.contains(elem))) {
    return {
      scrollbarX: false,
      scrollbarY: false
    };
  }
  var elemStyle = elem.style,
    overflowStyle = {
      hidden: elemStyle.overflow == 'hidden',
      hiddenX: elemStyle.overflowX == 'hidden',
      hiddenY: elemStyle.overflowY == 'hidden',
      scroll: elemStyle.overflow == 'scroll',
      scrollX: elemStyle.overflowX == 'scroll',
      scrollY: elemStyle.overflowY == 'scroll'
    };
  return {
    scrollbarX: overflowStyle.scroll || overflowStyle.scrollX || (!overflowStyle.hidden & !overflowStyle.hiddenX && elem.clientWidth elem.scrollWidth),
    scrollbarY: overflowStyle.scroll || overflowStyle.scrollY || (!overflowStyle.hidden && !overflowStyle.hiddenY && elem.clientHeight elem.scrollHeight)
  };
}

當(dāng)x或y方向的overflow為scroll的時(shí)候，該方向的scrollbarX為true，表示出現(xiàn)滾動(dòng)條。

5）計(jì)算滾動(dòng)條的寬度

function scrollbarWidth() {
  var docE = document.documentElement,
    body = document.body,
    e = document.createElement('div');

  e.style.cssText = 'position: absolute; top: -9999px; width: 50px; height: 50px; overflow: scroll;';

  body.appendChild(e);
  var _scrollbarWidth = e.offsetWidth - e.clientWidth
  body.removeChild(e);
  return _scrollbarWidth;
}
function scrollbarWidth() {
  var docE = document.documentElement,
    body = document.body,
    e = document.createElement('div');
 
  e.style.cssText = 'position: absolute; top: -9999px; width: 50px; height: 50px; overflow: scroll;';
 
  body.appendChild(e);
  var _scrollbarWidth = e.offsetWidth - e.clientWidth
  body.removeChild(e);
  return _scrollbarWidth;
}

以上就是本文的全部?jī)?nèi)容，希望能對(duì)您有所幫助：）另外本文第二部分提供的代碼，是根據(jù)個(gè)人思考和經(jīng)驗(yàn)總結(jié)出的一些方法，在兼容性方面可能還有未考慮到的地方，如果您有遇到其它不兼容的情況或者有更好的代碼，還請(qǐng)不吝賜教，歡迎您的指導(dǎo)。

您可能感興趣的文章: