网页元素的尺寸和位移属性大全

网页元素/窗口的尺寸

• clientHeight: 元素内部的高度（单位像素），包括内边距，但不包括水平滚动条、边框和外边距。
• offsetHeight: 元素的像素高度，包括元素的内边距和边框，且是一个整数。
• scrollHeight: 元素内容的总高度，包括由于溢出导致的视图中不可见内容，包括内边距，但不包括边框和外边距。
• innerHeight: 浏览器窗口的视口（viewport）高度，包括滚动条（如果有），是window对象的属性

网页元素/窗口的位置

• scrollTop: 元素的内容垂直滚动的像素数，是一个整数。
• offsetTop: 元素相对于其 offsetParent 元素的顶部内边距的距离。

设置元素/窗口的位置：

• scrollTo：滚动到指定位置，参数为x, y坐标
• scrollBy：相对当前位置滚动指定距离，参数为x, y坐标
• scrollIntoView：滚动到元素可见，参数为true时，元素顶部与视口顶部对齐，参数为false时，元素底部与视口底部对齐，参数为option时，可以设置滚动的行为，如smooth平滑滚动
• scrollIntoViewIfNeeded：滚动到元素可见，但只有在元素不可见时才滚动，参数为true时，元素顶部与视口顶部对齐，参数为false时，元素底部与视口底部对齐，参数为option时，可以设置滚动的行为，如smooth平滑滚动

其他

• scrollY: window对象的属性，表示文档在垂直方向已滚动的像素值。
• pageYOffset: 与scrollY相同，是较老的属性名，为了兼容性而保留。
• clientY: 鼠标事件发生时，指针相对于客户端区域（通常是浏览器窗口）顶部的垂直坐标。

示例图