javascript 計算捲軸的寬度的兩個例子

在計算捲軸之前，說明下捲軸的佔位方式。在PC瀏覽器中，捲軸是佔位元素的內邊距和內容地區的；而在行動瀏覽器中，捲軸是不佔用內邊距和內容地區，並且還及時顯隱。因此，只需要在在PC瀏覽器中計算捲軸的寬度，尤其是在全屏彈窗不可滾動的情況中。

詳細方法如下（offsetWidth-clientWidth）：

function getScrollbarWidth() {
 var oP = document.createElement('p'),
  styles = {
   width: '100px',
   height: '100px',
   overflowY: 'scroll'
  }, i, scrollbarWidth;
 for (i in styles) oP.style[i] = styles[i];
 document.body.appendChild(oP);
 scrollbarWidth = oP.offsetWidth - oP.clientWidth;
 oP.remove();
 return scrollbarWidth;
}
關於offsetWidth和clientWidth更多知識參考JS學習13：screen/client/offset/scroll/inner/avail的width/left。

方法2（clientWidth-clientWidth）：

function getScrollbarWidth() {
 var oP = document.createElement('p'),
  styles = {
   width: '100px',
   height: '100px'
  }, i, clientWidth1, clientWidth2, scrollbarWidth;
 for (i in styles) oP.style[i] = styles[i];
 document.body.appendChild(oP);
 clientWidth1 = oP.clientWidth;
 oP.style.overflowY = 'scroll';
 clientWidth2 = oP.clientWidth;
 scrollbarWidth = clientWidth1 - clientWidth2;
 oP.remove();
 return scrollbarWidth;
}