滚动条，可视化窗口宽高，

分手后的思念是犯贱 2022-05-26 10:50 202阅读 0赞

1.查看滚动条的滚动距离

**window.pageXOffset**

屏幕的右侧，举例网页的左侧有多少像素

**window.pageYOffset**

屏幕的底端，距离网页的顶端有多少像素

不足：IE9和IE9以下不兼容

IE9以下如何获取滚动像素？

document.body.scrollLeft

document.body.scrollTop

document.documentElement.scrollLeft

document.documentElement.scrollTop

document.body和document.documentElement兼容性比较混乱，

当document.body能获取的时候document.documentElement肯定为0，

当document.documentElement能获取的时候，document.body肯定为0

所以在使用的时候经常这么来用：

document.body.scrollLeft + document.documentElement.scrollLeft

小练习：封装一个getScrollOffset()方法解决兼容性问题，使所有版本浏览器都支持。

//兼容版  求浏览器滚动条滚动距离
    function getScrollOffset() {
    	
    if(window.pageXOffset) {
    	
    return {
    	
    	x : window.pageXOffset,
    	
    	y : window.pageYOffset
    	
    	}
    	
    }else {
    	return {
    	
    	x : document.body.scrollLeft + document.documentElement.scrollLeft,
    	
    	y : document.body.scrollTop + document.documentElement.scrollTop,
    }
    	
    }
    	
    }

--------------------

2.查看可视窗口的尺寸（像素）

window.innerWidth  /  window.innerHeight

可以查看屏幕当前可视的像素，并非屏幕大小。

不足：IE9以下不兼容

--------------------

document.documentElement.clientWidth

document.documentElement.clientHeight

标准模式下，任意浏览器都支持。

--------------------

document.body.clientWidth

document.body.clientHeight

适用于怪异模式下的浏览器

（比如说h5的文档，把文档类型声明删除掉就是怪异模式...）

--------------------

封装一个方法，返回浏览器可视化窗口尺寸getViewportOffset(),解决兼容性问题。

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

--------------------

查看元素的宽高

dom.offsetWidth

dom.offsetHeight

控制台测试：

![QQ浏览器截图\_20180323141920\_CFDE9AB1149743ebB8296180FEDAF875.jpg][QQ_20180323141920_CFDE9AB1149743ebB8296180FEDAF875.jpg]

可以获取元素的宽高。

--------------------

查看元素的位置

dom.offsetLeft ,  dom.offsetTop

返回相对于与自己最近的有定位的父级元素的位置信息，

如果没有定位的父级元素，则相对于body的坐标。