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

原创

于 2024-01-14 09:39:30 发布 · 898 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #前端

文章目录

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

一. 绝对位置

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

// 获取元素的绝对位置坐标（相对于页面左上角）
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"
 });