js getBoundingClientRect使用方法详解

Element.getBoundingClientRect()

// 获取dom元素相对于网页左上角定位的距离
function offset(el) {
  var top = 0;
  var left = 0;
  // 获取元素的位置还有getBoundingClientRect的方法
  // 从网上得知offset的兼容较差而且设置translate3D的y轴值给元素定位了y轴的距离后
  //会出现offsetTop为0
  do {
    top += el.offsetTop;
    left += el.offsetLeft;
  }
  while(el = el.offsetParent);// 存在兼容性问题，需要兼容
  
  
  return {
    top: top,
    left: left
  }
}

var odiv = document.getElementsByClassName('markdown-body');
offset(a[0]); // {top: 271, left: 136}

var positionX = this.getBoundingClientRect().left + document.documentElement.scrollLeft;
var positionY = this.getBoundingClientRect().top + document.documentElement.scrollLeft;

function isElView(el) {
  var top = el.getBoundingClientRect().top; // 元素顶端到可见区域顶端的距离
  var bottom = el.getBoundingClientRect().bottom; // 元素底部端到可见区域顶端的距离
  var se = document.documentElement.clientHeight; // 浏览器可见区域高度。
  
  if (top < se && bottom > 0) {
    return true;
  }
  else if (top >= se || bottom <= 0) {
    // 不可见
  }
  return false;
}