offsetTop & scrollTop
offsetTop & offsetLeft
element.offsetTop 是个只读属性，它代表了元素顶部外边距（border外侧）到 offsetParent 元素的顶部内边距（border内侧）。与offsetTop相关的属性为offsetLeft，代表了元素到 offsetParent 元素的左部内边距。
element.offsetParent：返回距离元素最近的一个具有定位的祖先元素（relative，absolute，fixed），若不存在offsetParent为返回body。
offsetTop和offsetLeft返回值的示意图如下所示：
图左是当父元素设置了position属性时，父元素即为offsetParent，返回值即元素到父元素内边距的距离。图右是元素的祖先元素都没有position属性，两者的返回值是根据body元素来定的。
scrollTop & scrollLeft
element.scrollTop和 element.scrollLeft分别代编垂直方向和水平方向滚动（内卷）的像素值。当一个元素的内容没有产生垂直方向的滚动条，scrollTop 值为 0。同理，当没有水平方向的滚动条，scrollLeft 值为 0。
这两个属性为可写属性，例如，可以设置scrollTop的值：
// Set the number of pixels scrolled.
element.scrollTop = intValue;
tip
- 当元素不能滚动时，
scrollTop会返回 0 - 当设置
scrollTop的值小于 0，scrollTop会返回 0 - 如果设置了超出这个容器可滚动的值, scrollTop 会被设为最大值。
scrollTop的示意图如下：
通过上图可以看出，scrollTop的返回值为元素内容顶部到它对应的viewport可见内容顶部的距离。
tip
当scrollTop被用于根元素<html>，此时它的返回值和scrollY是相同的，它的应用场景详见：getBoundingClientRect-获取元素相对于整个网页左上角定位的属性值