dom.offsetTop 一个元素距离上一个元素顶部的距离 (这个元素需要是body的子元素)
window.scrollY 滚动条的高度
offsetHeight offsetWidth 元素的高度 宽度 包括元素的边框、内边距和滚动条
scrollHeight scrollWidth 元素的高度宽度 包括看不见的部分
window.innerWidth, window.innerHeight:只读。视口(viewport)的尺寸,包含滚动条
clientHeight, clientWidth:包括padding,但不包括border, margin和滚动条。如下图:
做一些拖拽 跳转到顶部时 需要用到
Element.getBoundingClientRect()
:只读,返回浮点值。这个方法非常有用,常用于确定元素相对于视口的位置。该方法会返回一个DOMRect对象,包含left, top, width, height, bottom, right六个属性:
-
left, right, top, bottom
:都是元素(不包括margin)相对于视口的原点(视口的上边界和左边界)的距离。 -
height, width
:元素的整体尺寸,包括被滚动隐藏的部分;padding和border参与计算。另外,heigth=bottom-top, width=right-left
。