clientHeight、scrollTop、getBoundi

clientHeight：可视窗口的高度
scrollTop：滚动条距离document顶部的距离 //let scrollHight = document.documentElement.scrollTop || document.body.scrollTop; scrollHight是滚动条滚动的距离 不可以使用元素.scrollTop来获取
getBoundingClientRect：元素距离document顶部的距离
offsetTop:
offsetParent:
js:

/*let offsetParent = document.getElementById("test").offsetParent;  //HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的（closest，指包含层级上的最近）包含该元素的定位(position:)元素。
      console.log(offsetParent.offsetTop )  //0   HTMLElement.offsetTop 为只读属性，它返回当前元素相对于其 offsetParent 元素(拥有position:的元素)的顶部的距离。
      console.log(offsetParent )

      let offsetParent = document.getElementById("test");  //HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的（closest，指包含层级上的最近）包含该元素的定位(position:)元素。
      console.log(offsetParent.offsetTop )  //368
      console.log(offsetParent )

html

<div style="position: relative;margin-top: 30px;height: 50px;overflow-y:auto;">
      <div style="position: relative;height: 100px;">
        <div id="test" style="background: antiquewhite;">测试</div>
        <p>内容《》<br/></br></p>
      </div>
    </div>