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;