贴上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;