浏览器滚动条位置

浏览器滚动条位置

查看滚动条距离
ie9 以下不兼容：

• window.pageXOffset / window.pageYOffset

ie9以下版本：

• document.body.scrollLeft / Top；
• document.documentElement.scrollLeft / Top；
• 这两个属性在ie9以下的每个版本中都只存在一个，所以处理兼容性问题时把它们相加就可以了。
  封装方法获取滚动条位置

function getScrollOffset() {  
  if (window.pageXOffset) {   
     return {    
          x: window.pageXOffset,  
           y: window.pageYOffset  
          }  
    }  
          return { 
            x: document.body.scrollLeft + document.documentElement.scrollLeft,      
            y: document.body.scrollLeft + document.documentElement.scrollLeft      
              };
          }

让滚动条滚动

• window.scroll()
• window.scrollTo()
• window.scrollBy()
  这三个方法类似，都是将x，y坐标传入，然后让滚动条滚到目标位置。不过不同的是scrollBy()方法实现的是在之前的坐标上进行累加。
  查看可视区窗口的尺寸
  ie9以下的版本不兼容：
• window.innerWidth / innerHeight
• 谷歌下获取的是包括滚动条在内的宽度 / 高度

ie9以下版本：

• 标准模式：document.documentElement.clientWidth / Height
• 谷歌下获取的是不包括滚动条在内的宽度 / 高度
• IE9 以下获取的是不包括滚动条在内的宽度 / 高度，IE9 以上获取的是包括滚动条在内的宽度 / 高度
• 怪异模式：document.body.clientWidth / Height

区分标准模式和怪异模式方法：document.compatMode
​ - 值为 CSS1Compat 就是标准模式
​ - 值为 BackCompat 就是怪异模

封装方法查看可视窗口尺寸

function getViewportOffset() {   
   if (window.innerWidth) {       
      return {            
          x: window.innerWidth,            
          y: window.innerHeight       
      };    
   } else {        
       if (document.compatMode === 'CSS1Compat') {           
            return {                
                x: document.documentElement.clientWidth,                
                y: document.documentElement.clientHeight           
             };        
     } else {            
         return {                
             x: document.body.clientWidth,                
             y: document.body.clientHeight           
                 };       
              }    
           }
        }