浏览器滚动条位置

最新推荐文章于 2024-08-12 10:38:25 发布

YZZZ_ZZZY

最新推荐文章于 2024-08-12 10:38:25 发布

阅读量1.7k

点赞数

本文链接：https://blog.csdn.net/weixin_44260504/article/details/88858035

版权

浏览器滚动条位置

查看滚动条距离
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           
                 };       
              }    
           }
        }