JS优化：scroll（）与client（）的封装——兼容多个浏览器

1、scrollTop/scrollLeft:检测被浏览器遮挡（卷去）的头部和左边部分.

由于存在是否声明DTD（文档类型定义）的问题，不同浏览器对scroll的调用方式不同，对此，这里做了一个兼容多个浏览器的scroll（）的封装方法

     function scroll(){
            //如果这个属性存在，那么返回值应该是0-无穷大
            //如果没有返回值是undefined；
            if(window.pageYOffset !== undefined){
                return {
                    "top": window.pageYOffset,
                    "left": window.pageXOffset
                };
            }else if(document.compatMode === "CSS1Compat"){
                return {
                    "top": document.documentElement.scrollTop,
                    "left": document.documentElement.scrollLeft
                };
            }else{
                return {
                    "top": document.body.scrollTop,
                    "left": document.body.scrollLeft
                };
            }

还有一个更简略的方法：

function scroll(){
       if(window.pageYOffset !== undefined){
      return {
         "top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
         "left":  window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft 
                  }
}

调用方式：（返回被浏览器遮挡（卷去）的头部和左边部分长度）

scroll().top

 scroll().left

2、同理，clientWidth/clientHeight:检测浏览器可视区域宽度/高度.

function client(){
    if(window.innerHeight !== undefined){
        return {
            "width": window.innerWidth,
            "height": window.innerHeight
        }
    }else if(document.compatMode === "CSS1Compat"){
        return {
            "width": document.documentElement.clientWidth,
            "height": document.documentElement.clientHeight
        }
    }else{
        return {
            "width": document.body.clientWidth,
            "height": document.body.clientHeight
        }
    }
}

调用方式：（返回浏览器可视区域宽度/高度）

client().width

 client().height

这种封装方法是给scroll()或client()绑定了一个属性和值，调用函数.属性，返回的是一个属性值