JavaScript学习笔记：文档几何与滚动
文档坐标、窗口坐标和容器坐标
文档中元素的位置以CSS像素度量，有两种参考系，一是文档左上角，二是窗口左上角。基于这两个原点的两个坐标系被称作文档坐标与窗口坐标。
由于CSS的overflow属性允许文档中的元素包含的内容超出其所能显示区域，此时元素有自己的滚动条，其作为自身内容的窗口，而不是使用浏览器窗口。
文档坐标不能描述这中位置，所以浏览器使用窗口坐标来表示元素的位置。
css的position应用指定元素的定位方式：
- fixed: 表示固定定位，相对应其窗口坐标来定位
- relaive: 相对定位，相对于元素未设置position属性时的位置，即元素本来的位置进行定位。
- absolute: 绝对定位，是相对于文档或最近的包含它且设置了position定位的元素来定位。
将一个元素的position设置为relative，并将top与left设置为0，即可将该元素作为一个坐标系，称作“容器坐标”。
CSS中的像素是软件像素
像素分为软件像素与硬件像素，硬件像素指屏幕的像素，软件像素是按照一定的比例与硬件像素转换。
CSS中的像素使用的是浏览器的软件像素，window对象的devicePixelRatio表示多数设备像素对应一个软件像素，即设备像素比，
该值取决于硬件的物理分辨率、操作系统的设置以及浏览器的缩放级别。
元素的几何大小
Element.getBoundingClientRect()用于获取元素的集合大小及窗口坐标的位置。它没有参数，返回一个DOMRect对象，它有left,right,top,bottom,width,height几个属性，left与top表示元素左上角的x与y坐标，right与bottom数元素右下角的x与y坐标。width与height包含内边距与边框宽度。
块级元素，如图片、段落、div等始终是矩形，而行内元素如span与code则可能会跨行，此时会有多个矩形。
对于跨行的元素，调用getBoundingClientRect()，矩形的边界将由最宽的那一行来决定。
如果希望查询某一个矩形的宽度，使用getClientRets()方法来获取一个包含行内元素内所有矩形信息的只读的类数组对象，其元素也是DomRet对象。
使用document.elementFromPoint(x, y)来取得某一个点上的元素
该方法返回的是该位置上最内部（嵌套最深）、最外层（z-index最大）的元素。
滚动
window.scrollTo(x, y)会滚动窗口，使指定的点位于窗口左上角。如果该点太靠近文档底部或右边，无法将窗口左上角滚动到该位置，浏览器会让窗口左上角尽量接近该点。
window.scrollBy(x, y)也用于滚动，只是其参数是相对值，会加载当前滚动位置之上。
scrollTo()与scrollBy()方法传入两个坐标的滚动模式是瞬时滚动，若希望它们平滑地滚动，应传入一个对象，该对象应有以下属性：
- top: x坐标
- left: y坐标
- behavior: 滚动模式。smooth表示平滑滚动，instant表示瞬时滚动，auto为默认值，一般等同于instant。
ELement.scrollIntoView()会将滚动窗口使元素可见，默认会使元素上边对其或靠近窗口上沿，给方法传值false会使元素底边尽量对其窗口底边。
为了使元素可见，浏览器也会水平滚动窗口。
可以给scrollIntoView()方法传入一个对象，包含以下属性：
- behavior: 滚动模式。smooth,instants,auto
- block: 垂直方向定位。start,end,nearest,,center
- inline: 水平方向如何定位。start,end,nearest,,center
文档、元素、窗口的宽高，以及元素的位置
-
element.getBoundingClientRect()
有left,right,top,bottom,width,height属性;
宽高包含内边距与边框宽度。 -
window.innerWidth | document.documentElement.offsetHeight
文档的宽高 -
window.innerHeight | window.innerWidth
窗口内部的宽高 -
element.clientHeight | element.clientWidth
元素包含内边距的高度，不包含水平滚动条，边框和外边距 -
element.offsetHeight | element.offsetWidth
元素包含内边距、边框以及滚动条的的宽高 -
element.scrollHeight | element.scrollWidth
元素内容的宽高，包括溢出的不可见内容 -
element.offsetLeft | element.offsetTop
元素左上角相对于offsetParent的左/上边界的偏移像素值
