业务开发中经常会用到元素或者浏览器窗口的各种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() 让元素滚动到可视区域

大全整理