Нахождение позиции элемента относительно документа

Question

Какой самый простой способ определить положение элементов относительно окна документа / тела / браузера?

Прямо сейчас я использую .offsetLeft/offsetTop, но этот метод дает вам только положение относительно родительского элемента, поэтому вам нужно определить, сколько родителей к элементу body, чтобы узнать положение относительно тела / браузера. положение окна / документа.

Этот метод также громоздок.

Answer 1

Вы можете получить top и left без обхода DOM следующим образом:

function getCoords(elem) { // crossbrowser version
    var box = elem.getBoundingClientRect();

    var body = document.body;
    var docEl = document.documentElement;

    var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
    var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;

    var clientTop = docEl.clientTop || body.clientTop || 0;
    var clientLeft = docEl.clientLeft || body.clientLeft || 0;

    var top  = box.top +  scrollTop - clientTop;
    var left = box.left + scrollLeft - clientLeft;

    return { top: Math.round(top), left: Math.round(left) };
}

Answer 2

Вы можете использовать element.getBoundingClientRect() для получения позиции элемента относительно области просмотра.

Затем используйте document.documentElement.scrollTop для вычисления смещения области просмотра.

Сумма двух даст позицию элемента относительно документа:

element.getBoundingClientRect().top + document.documentElement.scrollTop

Answer 3

Вы можете пройти offsetParent до верхнего уровня DOM.

function getOffsetLeft( elem )
{
    var offsetLeft = 0;
    do {
      if ( !isNaN( elem.offsetLeft ) )
      {
          offsetLeft += elem.offsetLeft;
      }
    } while( elem = elem.offsetParent );
    return offsetLeft;
}

Answer 4

document-offset ( сторонний скрипт ) интересен, и, похоже, здесь используются подходы из других ответов.

Пример:

var offset = require('document-offset')
var target = document.getElementById('target')
console.log(offset(target))
// => {top: 69, left: 108} 

Answer 5

Я предлагаю использовать

element.getBoundingClientRect()

как предложено здесь вместо ручного вычисления смещения с помощью offsetLeft , offsetTop и offsetParent.как предложено здесь При некоторых обстоятельствах * ручной обход дает неверные результаты.Смотрите этот Plunker: http://plnkr.co/pC8Kgj

* Когда элемент находится внутри прокручиваемого родителя со статическим (= по умолчанию) позиционированием.

Answer 6

Я считаю следующий метод наиболее надежным при работе с крайними случаями, которые приводят к смещению offsetTop / offsetLeft.

function getPosition(element) {
    var clientRect = element.getBoundingClientRect();
    return {left: clientRect.left + document.body.scrollLeft,
            top: clientRect.top + document.body.scrollTop};
}

Answer 7

Для тех, кто хочет получить координаты x и y различных позиций элемента относительно документа.

const getCoords = (element, position) => {
  const { top, left, width, height } = element.getBoundingClientRect();
  let point;
  switch (position) {
    case "top left":
      point = {
        x: left + window.pageXOffset,
        y: top + window.pageYOffset
      };
      break;
    case "top center":
      point = {
        x: left + width / 2 + window.pageXOffset,
        y: top + window.pageYOffset
      };
      break;
    case "top right":
      point = {
        x: left + width + window.pageXOffset,
        y: top + window.pageYOffset
      };
      break;
    case "center left":
      point = {
        x: left + window.pageXOffset,
        y: top + height / 2 + window.pageYOffset
      };
      break;
    case "center":
      point = {
        x: left + width / 2 + window.pageXOffset,
        y: top + height / 2 + window.pageYOffset
      };
      break;
    case "center right":
      point = {
        x: left + width + window.pageXOffset,
        y: top + height / 2 + window.pageYOffset
      };
      break;
    case "bottom left":
      point = {
        x: left + window.pageXOffset,
        y: top + height + window.pageYOffset
      };
      break;
    case "bottom center":
      point = {
        x: left + width / 2 + window.pageXOffset,
        y: top + height + window.pageYOffset
      };
      break;
    case "bottom right":
      point = {
        x: left + width + window.pageXOffset,
        y: top + height + window.pageYOffset
      };
      break;
  }
  return point;
};

Использование

• getCoords(document.querySelector('selector'), 'center')

• getCoords(document.querySelector('selector'), 'bottom right')

• getCoords(document.querySelector('selector'), 'top center')

Answer 8

Если вы не возражаете против использования jQuery, тогда вы можете использовать функцию offset().Обратитесь к документации , если хотите узнать больше об этой функции.

Answer 9

http://www.quirksmode.org/js/findpos.html Объясняет лучший способ сделать это, в общем, вы на правильном пути, вы должны найти смещения и пройти по дереву родителей.