有关dom节点尺寸的小结

Screen 尺寸

Node.Client

• Node.clientTop 元素的上边框

• Node.clientLeft 元素的左边框

• Node.clientWidth 元素的宽度

  • 在 box-sizing:content-box 由设置 width + 左右的 padding

  • 在 box-sizing:border-box 由设置 width - 左右的 border

• Node.clientHeight 元素的高度

  • 在 box-sizing:content-box 由设置 height + 上下的 padding

  • 在 box-sizing:border-box 由设置 height - 上下的 border

Node.offset

• Node.offsetTop

  • 以父元素左上角为基准点 得到垂直方向的距离 由 父元素上内边距 + 子元素上外边距

  • 如果是 position:absolute 那么以参考元素节点的左上角作为基准点 得到 top

• Node.offsetLeft

  • 以父元素左上角为基准点 得到水平方向的距离 由 父元素左内边距 + 子元素左外边距

  • 如果是 position:absolute 那么以参考元素节点的左上角作为基准点 得到 left

• Node.offsetWidth 获取元素节点的实际占地面积

  • 在 box-sizing:content-box 由设置 width + 左右padding + 左右border

  • 在 box-sizing:border-box 由设置 width

• Node.offsetHeight 获取元素节点的实际占地面积

  • 在 box-sizing:content-box 由设置 height + 上下padding + 上下border

  • 在 box-sizing:border-box 由设置 height

  • Node.scroll

    • Node.scrollTop获取垂直方向被卷去的高度
    • Node.scrollLeft获取水平方向被卷去的宽度
    • Node.scrollContent获取元素节点由内容撑大的高度

• 回到顶部

  • 没有动画document.documentElement.scrollTop=0
  • 需要动画window.scrollTo({top:0,behavior:'smooth'});

• 触底加载

  • 判断触底格式Node.scrollTop+Node.clientHeight==Node.scrollHeight
  • 被卷曲的高度+自身可视区域的高度==由内容撑大的真实高度
  • 一般情况下为了缓冲通常是左边加上某个值大于右边

坐标尺寸

• clientY页面可视区左上角作为基准点
• layerY定位时 以自身左上角作为基准点
• pageY以页面顶部左上角为基准点
• screenY以屏幕做上角作为基准点

扩展

getBoundingClientRect()