scrollWidth到底是什么???

貼上MDN對scrollwidth的定義:

The Element.scrollWidth read-only property is a measurement of the width of an element's content, including content not visible on the screen due to overflow.

自譯:element.scrollWidth這個只讀屬性是用來測量元素內容寬度的一種方式,它包括了被overflow屬性隱藏的不可見的寬度.

The scrollWidth value is equal to the minimum width the element would require in order to fit all the content in the viewport without using a horizontal scrollbar. The width is measured in the same way as clientWidth: it includes the element's padding, but not its border, margin or vertical scrollbar (if present). It can also include the width of pseudo-elements such as ::before or ::after. If the element's content can fit without a need for horizontal scrollbar, its scrollWidth is equal to clientWidth.

自譯:scrollWidth值等於元素的最小寬度要求內容與視口相適,不使用水平的滾動條(意思應該就元素內容不要太大導致水平滾動條出現吧).這個寬度的測量方式與clientWidth方式一樣,包括元素的內邊距,不包括邊框,外邊距,垂直滾動條(如果有出現的話).它也可以包括包括偽元素的寬度例如::before或::after.如果元素的內容剛好合適不需要水平滾動條,那么scrollwidth就等於clientWdth.

 

看的似懂非懂,直接代碼測試:

html部分略
<script>
    var box = document.getElementById("box");
    // 頁面可視區的寬度
    var oClientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0;

    // 頁面可視區的高度
    var oClientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;

    // scrollTop 網頁被卷起的高度
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

    // scrollLeft 網頁左邊被卷起的寬度
    var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;

    // scrollWidth 表示整個網頁正文的寬度
    var scrollWidth = document.documentElement.scrollWidth || document.body.scrollWidth;

    // scrollHeight 表示整個網頁正文的高度
    var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

    box.onclick = function(e){
      var oEvent = e || event;
      console.log('相對顯示器左邊的位置screenX為：' + oEvent.screenX);              //95
      console.log('相對顯示器上邊的位置screenY為：' + oEvent.screenY);              //152
      console.log('相對可視區左邊的位置clientX為：' + oEvent.clientX);              //95
      console.log('相對可視區上邊的位置clientY為：' + oEvent.clientY);              //61
      console.log('可視區寬度clientWidth為:' + oClientWidth);                       //1920
      console.log('可視區高度clientHeight為:' + oClientHeight);                     //535
      console.log('點擊位置在頁面中的縱坐標為：' + (oEvent.clientY + scrollTop));   //1461
      console.log('點擊位置在頁面中的橫坐標為：' + (scrollLeft + oEvent.clientX));  //95
      console.log('頁面卷起的高度scrollTop為:' + scrollTop);                        //1400
      console.log('頁面左邊卷起的寬度為scrollLeft為：' + scrollLeft);               //0
      alert('盒子的寬度為scrollWideth為：' + box.scrollWidth);                    //3000
      alert('頁面的寬度為scrollWideth為：' + scrollWidth);  
      console.log('頁面的高度為scrollHeight為：' + scrollHeight);                   //5000
      console.log('點擊位置相對頁面位置的左邊pageX為:' + oEvent.pageX);             //95
      console.log('點擊位置相對頁面位置的上邊pageY為:' + oEvent.pageY);             //1461
              //1461
          }
</script>

 

1.盒子大小<body大小<瀏覽器窗口大小

a)        當body/html調用scrollwidth:

chrome, ie6-ie11:

body.scrollWidth=瀏覽器可視窗口寬度(clientWidth)--滾動條欄的寬度

b)        當盒子調用:

chrome, ie6-ie11:

box.scrollwidth=width+padding

2.盒子大小<瀏覽器窗口大小< body大小

a)        body/html調用scrollwidth:

chrome, ie6-ie11:

body.scrollWidth=body.width+ body.padding+ body.border+左邊的margin

(只對body的值進行累計,如果box有margin撐大了body也把box.margin的寬度不會計算進來)

b)        當盒子調用:

chrome, ie6-ie11:

box.scrollwidth=width+padding;

3.瀏覽器窗口大小<盒子大小< body大小

同情況2

4.body大小<盒子大小<瀏覽器窗口大小

chrome,ie11:

body.scrollWidth=瀏覽器可視窗口寬度--滾動條欄的寬度

box.scrollwidth=width+padding;

5.body大小<瀏覽器窗口大小<盒子大小

chrome,ie11:

body.scrollWidth=body.width+ body padding+ body.margin+body.leftpadding+body.leftboder+body.leftmargin;

box.scrollWidth=width+padding;

6.瀏覽器窗口大小 < body大小 <盒子大小

chrome,ie11:

body.scrollWidth= box.width+ box.padding+ box.margin+body.leftpadding+body.leftboder+body.leftmargin;

box.scrollWidth=box.width+box.padding;

 

總結:

看了很多資料說是clientWidth是可視區域大小其實也是包括了滾動條欄的寬度.

不管啥情況:box.scrollWidth=box.width+box.padding;

如果瀏覽器的窗口寬度最大:

body.scrollWidth=瀏覽器窗口大小(clientWidth)-右側滾動條欄寬度(一般是17px);

如果是body的寬度(border+padding)最大:

body.scrollWidth=body.width+ body.padding+ body.border+左邊的margin;

如果是盒子的寬度(border+padding)最大:

body.scrollWidth= box.width+ box.padding+ box.margin+body.leftpadding+body.leftboder+body.leftmargin;