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() 让元素滚动到可视区域

大全整理

__EOF__

本文作者：Paxster
本文链接：https://www.cnblogs.com/paxster/p/9856201.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！