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()绑定了一个属性和值,调用函数.属性,返回的是一个属性值



你可能感兴趣的:(【前端】js原生实用函数封装)