获取整个页面包括滚动条的宽度，获取滚动条宽度

更正！！！！！！！！

下面的代码没用了，

今天看到了 window.outerWidth 这个属性，直接就能取到整个页面包括滚动条的宽度；评论说 window.innerWidth 才是对的, 刚刚 chrome 下试了试, 全屏时两者一样, 缩小一点后 innerWidth 更准, outerWidth 多了 16 px.

同时，下面的代码也可以用 document.documentElement.clientWidth 来做阈值判断。

原因

想要做响应式设计，遇到——本来没有滚动条，缩小窗口时出现竖直滚动条，因为获取不到document+滚动条的宽度，所以可能莫名其妙的，没有在设置好的断点处达成相应效果。所以需要获取整个页面包括滚动条的宽度做判断。

解决办法

实时获取当前浏览所用浏览器的滚动条宽度

//获取当前浏览器滚动条的宽度，原理是设置一个不可见的div，查看设置scorll前后的宽度差
        function getScrollWidth() {
            var noScroll, scroll, oDiv = document.createElement("DIV");
            oDiv.style.cssText = "position:absolute;top:-1000px;width:100px;height:100px; overflow:hidden;";
            noScroll = document.body.appendChild(oDiv).clientWidth;
            oDiv.style.overflowY = "scroll";
            scroll = oDiv.clientWidth;
            document.body.removeChild(oDiv);
            return noScroll-scroll;
        }

//当窗口载入或者缩放时，若窗口宽度过小，则改竖式导航为横式导航
        function changeNav() {
        //检测滚动条部分
            $("body").scrollTop(10);//控制滚动条下移10px
			//说明有滚动条，则此时width要减去滚动条宽度
            if( $("body").scrollTop()>0 ){
                if ($('html').width() - getScrollWidth() < 768) {
                    $('#container').removeClass('tabs-left');
                } else {
                    if (!$('#container').hasClass('tabs-left')) {
                        $('#container').addClass('tabs-left');
                    }
                }
            }else{
//                没有滚动条，直接检测width
                if ($('html').width() < 768) {
                    $('#container').removeClass('tabs-left');
                } else {
                    if (!$('#container').hasClass('tabs-left')) {
                        $('#container').addClass('tabs-left');
                    }
                }
            }
        }
        $(window).resize(changeNav);
        $(window).resize();

    };