js宽高总结、可视区域总结

各种宽高总结

对象	属性	含义
window	innerWidth/innerHeight	浏览器窗口内部视口（viewport）宽高，包括滚动条宽度和高度
	outerWidth/outerHeight	浏览器窗口外部整体宽高，包含边框、工具栏等
	screenTop/screenLeft	浏览器窗口相对于屏幕顶部的垂直坐标、水平坐标位置. screenTop在Firefox中为screenX。IE、Opera、Chrome中如果紧贴屏幕顶部的话，则Top为浏览器工具栏的高度，而Firefox则为0 screenLeft在Firefox采用screenY
	screen.width/height	屏幕宽高
	screen.availWidth/availHeight	屏幕可用工作区的宽高
document.documentElement / 元素	clientWidth/clientHeight	元素的可视宽高（不包含滚动条边框），padding + 内容区宽度
	clientTop/clientLeft	元素顶部边框的宽度、元素左侧边框的宽度；
	offsetWidth/offsetHeight	元素的可视宽高，包括 padding、border、滚动条，但不包含外边距（margin）
	offsetLeft/offsetTop	元素相对于最近的定位祖先元素（position 非 static）的左侧、顶部距离
	scrollWidth/scrollHeight	元素的内容宽度和高度，包括超出视口的不可见部分
	scrollTop/scrollLeft	当元素内容超出其宽高的时候，元素被卷起的高度和宽度

 

 

 

 

 

 

 

获取鼠标位置

属性	含义	坐标参考点	兼容性
clientX/clientY	鼠标指针相对于浏览器可视区域（视口）左上角的 (X ，Y)坐标;不管浏览器窗口大小如何变化，都不会影响点击位置的坐标	视口（不含滚动）	所有主流浏览器
pageX/pageY	鼠标指针相对于文档页面左上角的(X,Y) 坐标（包含滚动偏移） 通常浏览器窗口没有出现滚动条时，该属性和event.clientX及event.clientY是等价的	整个文档（含滚动）	所有主流浏览器
screenX/screenY	鼠标指针相对于用户屏幕左上角的 (X,Y) 坐标	屏幕	所有主流浏览器
offsetX/offsetY	鼠标指针相对于触发事件的目标元素（event.target）的 (X,Y) 坐标	目标元素	现代浏览器（IE8+） firefox不支持该属性，应该使用event.layerX和event.layerY

相关的方法

element.getBoundingClientRect

判断指定元素相对于页面可视窗口的位置信息,通常结合windows.onScroll方法使用，当element.getBoundingClientRect.Top<=document.documentElement.clientHeight时表示该元素在可视范围内。

详细介绍

 

IntersectionObserver对象

异步监听目标元素与其祖先或视窗的位置信息，通常用于替代element.getBoundingClientRect+window.scroll的方案。

详细介绍

 

 element.scrollIntoViewIfNeeded(opt_center)

把某个元素滚动到可视区域，例如手机页面底部的表单输入框获取焦点时，软键盘会遮挡元素。这时就应该使用该特性。

 

element.requestFullscreen/exitFullscreen

页面全屏或退出全屏