Element 常用的位置 API

1. offset 系列

• 1.1 offsetWidth

  内容区宽度 + 内边距宽度 + 边框宽度
  content + padding + border
  

• 1.2 offsetHeight

  内容区高度 + 内边距高度 + 边框高度
  content + padding + border
  

• 1.3 offsetTop

  自身外边距高度 + 父元素内边距高度
  margin + offsetParent.padding
  

• 1.4 offsetLeft

  自身外边距宽度 + 父元素内边距宽度
  margin + offsetParent.padding
  

• 1.5 offsetParent

  自己的祖先元素里，第一个具有以下属性的元素，即为 offsetParent
  1. position 设置为非 static
  2. 该元素为 table,td,th,body
  3. 设置了 translate 属性
  

2. scroll 系列

• 2.1 scrollWidth

  子元素宽度 + 自身内边距宽度
  child.width + padding
  
  子元素宽度 = 内容区宽度 + 内边距宽度 + 边框宽度 + 外边距宽度
  child.width = child.content + child.padding + child.border + child.margin
  

• 2.2 scrollHeight

  子元素高度 + 自身内边距高度
  child.height + padding
  
  子元素高度 = 内容区高度 + 内边距高度 + 边框高度 + 外边距高度
  child.height = child.content + child.padding + child.border + child.margin
  

• 2.3 scrollTop

  子元素垂直方向卷去的高度
  
  

• 2.4 scrollLeft

  子元素水平方向卷去的宽度
  

3. client 系列

• 3.1 clientWidth

  内容区宽度 + 内边距宽度
  conten + padding
  

• 3.2 clientHeight

  内容区域高度 + 内边距高度
  content + padding
  

• 3.3 clientTop

  边框高度
  border
  

• 3.4 clientLeft

  边框宽度
  border
  

4.  附注

• 4.1 clientWidth 和 scrollWidth 区别

  1. 当没有滚动条出现，二者值相同
  2. 当有滚动条出现，clientWidth 会减去滚动条的宽度
  

• 4.2 使用 offset 系列，计算元素的 pageY 和 pageX

  # 如果有多级 offsetParent 且有 border值，则 pageY 和 pageX 将损失 border 精度
  # 可以使用 getBoundingClientRect 替代
  function pageX(ele) {
    let x = 0;
    while(e.offsetParent) {
      x += x.offfsetLeft;
      e = e.offsetParent;
    }
    return x;
  }
  
  function pageY(ele) {
    let y = 0;
    while(ele.offsetParent) {
      y += ele.offsetTop;
      ele = ele.offsetParent;
   }
   return ele;
  }
  

• 4.3 计算滚动元素在视口出现

  项目地址
  https://github.com/joinwen/scroll-show
  
  预览
  https://joinwen.github.io/scroll-show/example2.html
  

• 4.4 判断滚动到顶部

  (wrapper.scrollTop === 0) ? "顶部" : "非顶部"
  

• 4.5 判断滚动到底部

  (wrapper.scrollTop + wrapper.clientHeight === wrapper.scrollHeight) ? "底部" : "非底部"