Top值

业务开发中常常会用到元素或者浏览器窗口的各类top值，最近开发组件的过程当中也遇到各类问题，所以决定好好总结一下。

---

常见的top值

scrollTop

Element.scrollTop
属性能够获取或设置一个元素的内容垂直滚动的像素数。
一个元素的 scrollTop值是这个元素的顶部到它的最顶部可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。

// 得到滚动的像素数
var  intElemScrollTop = someElement.scrollTop;
// 运行此代码后， intElemScrollTop 是一个整数，即element的内容向上滚动的像素数。
// 设置滚动的距离
element.scrollTop = intValue;

scrollTop 能够被设置为任何整数值，同时注意：

• 若是一个元素不能被滚动（例如，它没有溢出，或者这个元素有一个"non-scrollable"属性）， scrollTop将被设置为0。
• 设置scrollTop的值小于0，scrollTop 被设为0
• 若是设置了超出这个容器可滚动的值, scrollTop 会被设为最大值.
• window对象或包含有滚动元素的均可以使用scrollTop并设置本身想要的top值
  例子：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollTop

获取window对象的scrollTop存在兼容性问题。

解决方案1

if(window.pageYOffset){//这一条滤去了大部分， 只留了IE678

}else if(document.documentElement.scrollTop ){//IE678 的非quirk模式

}else if(document.body.scrolltop){//IE678 的quirk模式

}

解决方案2

scrolltop = (((t = document.documentElement) || (t = document.body.parentNode)) typeof t.scrollTop == ‘number’ ? t : document.body).scrollTop

来源》

offsetTop

HTMLElement.offsetTop 为只读属性，它返回当前元素相对于其 offsetParent 元素的顶部的距离。

元素的offsetTop是相对于父级元素的，并非直接获取到距离页面顶部的距离,须要区分不一样状况!!!

offsetParent

向上寻找有定位的祖先节点，依不一样情況会有不一样结果：

1. 往上寻找position不为static的第一个祖先节点。
2. 往上寻找第一个TABLE / TH / TD节点。
3. 若是沒有找到则为BODY。
4. 若是Element自己为fixed，则为null。
5. 文件根节点和BODY的offsetParent为null。

来源》

clientTop

一个元素顶部边框的宽度（以像素表示）。不包括顶部外边距或内边距。clientTop 是只读的。

获取元素的top-border宽度。

screenTop

screenLeft和screenTop属性返回窗口相对于屏幕的X和Y坐标。

Element.getBoundingClientRect()

经常使用于肯定元素相对于视口的位置。该方法会返回一个DOMRect对象，包含left, top, width, height, bottom, right六个属性。

getClientRects() 返回一个TextRectangle集合，就是TextRectangleList对象。

来源》

其余方法

elementFromPoint() 返回给定坐标处所在的元素

scrollIntoView() 让元素滚动到可视区域

大全整理