API 集合
Element.getBoundingClientRect()方法返回一个 对象，包含属性：width，height，left, right, x, y, top,bottom，其提供了元素的大小及其相对于 视口的位置。
注意：这里得到的 width 为 contentWidth + padding + border
-
HTMLElement.offsetHeight返回元素的像素高度，为一个整数，值包含内容高度，padding以及border -
HTMLElement.offsetWidth返回元素的像素宽度，为一个整数，值包含内容宽度，padding以及border -
HTMLElement.offsetLeft和HTMLElement.offsetTop返回元素左上角相对于 offsetParent 左上角的距离。 offsetParent 为相对于元素来说距离最近的定位父元素或者table, td, th, body 元素 -
Element.scrollHeight 返回元素的内容高度，包括不在适口范围内的高度（被滑动隐藏了），包括元素的 padding, 但不包括元素的 border 和 margin
-
Element.scrollTop返回这个元素的内容顶部到他视口可见内容的距离（视口顶部向上元素被隐藏的内容），可能为一个小数，可修改，修改之后页面会自动滚动到对应的位置 -
Element.clientHeight= height + padding - 水平滚动条高度（如果存在）即不包括border 和 margin -
Element.clientWidth= width+ padding - 垂直滚动条高度（如果存在）即不包括border 和 margin
-
Window.scrollX返回页面水平方向从左侧开始的滚动值 -
Window.scrollY返回页面垂直方向从顶部开始的滚动值 -
Window.scroll()/Window.scrollTo()滚动到文档中的某个坐标（移动到左上角），参数为（x-coord,y-coord） 或者为 （{top: number, left: number, behavior: ‘smooth’/ ‘instant’/’auto’}） -
MouseEvent.screenX返回事件发生时鼠标距离视口左边界的距离（不包含水平方向的滚动距离），为一个浮点数 -
MouseEvent.screenY返回事件发生时鼠标距离视口上边界的距离（不包含垂直方向的滚动距离），为一个浮点数
实践问题
- 判断元素是否滚动到底部：
Math.abs(element.scrollHeight-element.clientHeight - element.scrollTop) < 1
- 判断元素是否能滚动
window.getComputedStyle(element).overflowY === 'visible'
window.getComputedStyle(element).overflowY !== 'hidden'
- 获取当前元素距离页面顶部的距离
const viewTop= ele.getBoundingClientRect().top
toPageStartLength = Window.scrollY + viewTop
