window.onscroll =function(){}
onscroll当页面滚动条被滚动时触发
监听页面滚动
被window对象所调用
获取滚动条偏移量
滚动条偏移量是滚动条距离页面上边的距离

 document.body.scrollTop--chrome支持(低版本)
 document.documentElement.scrollTop--Chrome、firefox支持
 window.pageYOffset   safari支持
 window.pageXOffset

window.onscroll = function () {
        var y = document.documentElement.scrollTop;
        console.log(y);
        var x = document.documentElement.scrollLeft;
        console.log(x);
    }

onscroll兼容性写法

function scrol() {
        // 普通方法
        // var scrollTop = document.documentElement.scrollTop ||
        //     document.body.scrollTop || window.pageYOffset;
        // var scrollLeft = document.documentElement.scrollLeft ||
        //     document.body.scrollLeft || window.pageXOffset;
        // return [scrollTop, scrollLeft];

        // 使用json字符串方法
        var scroll={
            y:document.documentElement.scrollTop ||
            document.body.scrollTop || window.pageYOffset,
            x:document.documentElement.scrollLeft ||
            document.body.scrollLeft || window.pageXOffset,
        }
        return scroll;
    }
 window.onscroll = function () {
        // console.log(scrol()[0], scrol()[1]);   普通方法输出
        console.log(scrol().y,scrol().x);   //json输出
    } 

 // window.onresize浏览器窗口大小发生变化，触发调用方法
    window.onresize=function(){
        // console.log(document.documentElement.offsetWidth);
        console.log(document.documentElement.offsetHeight);
        console.log(document.documentElement.clientHeight);
        console.log(document.documentElement.scrollHeight);
        document.documentElement.scrollTop=500;
        console.log(document.documentElement.scrollTop);    
    }

滚动条高度 + 当前窗口的可见高度 == 页面的整体高度
文档高度，整个html加载完后的高度
document.documentElement.offsetHeight
浏览器可视区域高度，是浏览器显示内容区域的大小
document.documentElement.clientHeight
滚动条的总长度
document.documentElement.scrollHeight

    offsetHeight=实际文档高度
    if(文档的高度<窗口高度){
        scrollHeight=clientHeight(窗口高度)
    }else{
        scrollHeight=offsetHeight(文档高度)
    }