js 滚动条

    <script type="text/javascript">

        //文档高度1016 包含隐藏的margin和padding 实际1000
        //文档1000
        //窗口高度为530时候, 滚动条 最小0, 最大高度为470     (加上隐藏margin和padding 为486)
        //窗口高度为151时候, 滚动条 最小0, 最大高度为849
        //窗口高度为200时候, 滚动条 最小0, 最大高度为800
        //窗口高度为500时候, 滚动条 最小0, 最大高度为500
        //说明1, 文档高度不变  窗口高度越小,滚动条高度越大,
        //说明2, 文档高度不变  窗口高度越大,滚动条高度越小,
        // 文档高度 - 窗口高度 =  滚动条最大高度(拉到底)




        //作为一个对象的w和h属性返回视口的尺寸
        function getViewportSize(w) {
            //使用指定的窗口， 如果不带参数则使用当前窗口
            w = w || window;

            //除了IE8及更早的版本以外，其他浏览器都能用
            if (w.innerWidth != null)       //能获取当前窗口的宽度(包含滚动条)//当浏览器宽度调整时，这个值也会跟着变化
                return { w: w.innerWidth, h: w.innerHeight };

            //对标准模式下的IE（或任意浏览器）
            var d = w.document;
            if (document.compatMode == "CSS1Compat")
                return { w: d.documentElement.clientWidth, h: d.documentElement.clientHeight };

            //对怪异模式下的浏览器
            return { w: d.body.clientWidth, h: d.body.clientHeight };
        }


        window.onscroll = function () {
            var t = document.documentElement.scrollTop || document.body.scrollTop;
            //文档高度
            var documentHeight = document.documentElement.offsetHeight; //文档高度
            var viewPortHeight = getViewportSize().h; //窗口高度
            var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; //scrollTop  元素垂直滚动条位置
            //return documentHeight - viewPortHeight - scrollHeight < 20;

            console.log("文档高度" + documentHeight);
            console.log("窗口高度" + viewPortHeight);
            console.log("滚动条高度" + scrollHeight);


        }

    </script>