让窗口滚动到指定位置

1.让窗口滚动到指定位置：前提条件是窗口的大小足够长和高可以实现滚动。

1.window.scrollTo(0,600);

2.window.scroll(0,600);

3.window.scrollBy(0,50);

4.前两个方法功能类似，用法都是将x，y坐标传入，实现滚动到指定位置。而scrollBy()会在之前的数据基础上做累加，指在现有位置的基础上滚动到传入的值。它们都是让body元素滚动。

2.让窗口滚动到指定元素可见：就是调用元素的底部会尽量与视口的顶部齐平，也不一定主要是能不能滚以及能滚多远。

元素.scrollIntoView(true)默认为true，将元素和视口的上边缘对齐；如果传递参数false，则将元素的下边缘和视口的下边缘对齐。

页面滚动的距离

算页面滚动的距离就是body元素滚动条卷去的距离兼容写法：

window.pageXOffset/window.pageYOffset，bom操作，IE8及IE8以下不兼容

document.body.scrollLeft/scrollTop

document.documentElement.scrollLeft/scrollTop

//获取页面文档向下滚动过的像素数（body元素滚动条向下滚动的距离）
let sY=window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop;

//获取页面文档向右滚动过的像素数（body元素滚动条向右滚动的距离）
let sX=window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft;

窗口的可视区域

查看视口的尺寸(会受窗口缩放影响)

window.innerWidth/window.innerHeight，bom操作，IE8及IE8以下不兼容

document.documentElement.clientWidth/clientHeight，标准模式下(的渲染模式)，任意浏览器都兼容

document.body.clientWidth/clientHeight，适用于怪异混杂非标准模式下的浏览器

document.compatMode，可区分标准模式与否，返回的是字符串。(BackCompat：标准兼容模式关闭。CSS1Compat：标准兼容模式开启)

兼容做法:

兼容做法:

    let cWidth,cHeight;
	if (document.compatMode == "BackCompat") {
		cWidth = window.innerWidth||document.body.clientWidth;
		cHeight =window.innerHeight||document.body.clientHeight;
	} else {
		//document.compatMode == "CSS1Compat"
		cWidth = window.innerWidth||document.documentElement.clientWidth;
		cHeight = window.innerHeight||document.documentElement.clientHeight;
	}

元素的几何尺寸

如果元素隐藏状态下就获取不到相关信息。

1.获取元素的几何尺寸 元素.getBoundingClientRect();

1.该方法返回一个对象，对象里边有 left,top,right,bottom,height,width属性，这些属性值是number类型，不能用于设置而设置只能元素.style来设置，只能获取用于计算。

2.left和top代表该元素左上角的X和Y坐标，right和bottom代表元素右下角的X和Y坐标

3.返回的对象里边还有属性x,y，表示的是元素左顶点相对于页面body左顶点的距离

height和width属性老版本 IE并未实现

2.获取视觉高宽：可完全替代getBoundingClientRect()方法

元素.offsetWidth ：元素内容的宽+左右内边距+左右边框

(width+paddingLeft+paddingRight+boderLeft+boderRight)

元素.offsetHeight：元素内容的高+上下内边距+上下边框

(height+paddingTop+paddingBottom+boderTop+boderBottom)