获取滚动条的宽度
做了一个全屏的轮播图,在设计师那发现问题,banner图片获取的宽度是浏览器的宽度,在浏览器不是全屏的情况下打开再放大浏览器,banner不能全屏显示。
问题其实很简单,把获取浏览器的宽度改为获取屏幕宽度就可以了,但浏览器的滚动条会占据一定的宽度,所以需要获取浏览器的滚动条宽度,然后减去这部分宽度,就是banner图需要的宽度。所以重点在于获取滚动条的宽度,下面是一个获取滚动条宽度的函数。
获取滚动条宽度的函数
1 function getScrollWidth() { 2 var noScroll, scroll, oDiv = document.createElement("DIV"); 3 oDiv.style.cssText = "position:absolute; top:-9999px; width:100px; height:100px; overflow:hidden;"; 4 noScroll = document.body.appendChild(oDiv).clientWidth; 5 oDiv.style.overflowY = "scroll"; 6 scroll = oDiv.clientWidth; 7 document.body.removeChild(oDiv); 8 return noScroll-scroll; 9 }