HTML之元素相对页面(视口)左上角的绝对坐标

目录

• 一. 绝对位置
• 二. 相对位置

一. 绝对位置

• 网页元素的绝对位置，指该元素的左上角相对于整张网页左上角的坐标。无论网页滚动条如何滚动，它都是不会变化的。

• // 获取元素的绝对位置坐标（相对于页面左上角）
  function getElementPagePosition(element){
    //计算x坐标
    var actualLeft = element.offsetLeft;
    var current = element.offsetParent;
    while (current !== null){
      actualLeft += current.offsetLeft;
      current = current.offsetParent;
    }
    //计算y坐标
    var actualTop = element.offsetTop;
    var current = element.offsetParent;
    while (current !== null){
      actualTop += (current.offsetTop+current.clientTop);
      current = current.offsetParent;
    }
    //返回结果
    return {x: actualLeft, y: actualTop}
  }
  

• 使用例子:

  var rect = getElementPagePosition(element);
  // 输出坐标
  console.log("元素的左上角相对于视口的坐标：", rect.x, rect.y);
  //滚动到该元素 (滚动到使该元素位置 x y 贴紧视口左上角)
  window.scrollTo({
   left: rect.x,
   top: rect.y,
   behavior:"smooth"
   });
  

二. 相对位置

• 网页元素的相对位置，是指元素左上角相对于浏览器窗口可视区域（视区：viewport）左上角的坐标。它会随着滚动条滚动而变化。

• // 获取元素的绝对位置坐标（像对于浏览器视区左上角）
  function getElementViewPosition(element){
    //计算x坐标
    var actualLeft = element.offsetLeft;
    var current = element.offsetParent;
    while (current !== null){
      actualLeft +=  (current.offsetLeft+current.clientLeft);
      current = current.offsetParent;
    }
    if (document.compatMode == "BackCompat"){
      var elementScrollLeft=document.body.scrollLeft;
    } else {
      var elementScrollLeft=document.documentElement.scrollLeft;
    }
    var left = actualLeft - elementScrollLeft;
    //计算y坐标
    var actualTop = element.offsetTop;
    var current = element.offsetParent;
    while (current !== null){
      actualTop += (current.offsetTop+current.clientTop);
      current = current.offsetParent;
    }
    if (document.compatMode == "BackCompat"){
      var elementScrollTop=document.body.scrollTop;
    } else {
      var elementScrollTop=document.documentElement.scrollTop;
    }
    var right = actualTop-elementScrollTop;
    //返回结果
    return {x: left, y: right}
  }