获取滚动条的宽度

  做了一个全屏的轮播图,在设计师那发现问题,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 }

 

posted @ 2013-10-05 16:37  特雷西one  阅读(2321)  评论(2编辑  收藏  举报