Определение позиции элемента относительно документа

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

Ответ 1

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

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

Ответ 2

Вы можете получить сверху и слева без прохождения 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) };
}

Ответ 3

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

Используйте scrollY (document.documentElement.scrollTop кросс-браузер совместимый), чтобы вычислить смещение видового экрана.

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

subjectRect.top + document.documentElement.scrollTop

Ответ 4

Если вы используете npm, document-offset интересен и, похоже, использует подходы из других ответов здесь. Использование довольно просто:

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

Ответ 5

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

Ответ 6

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

element.getBoundingClientRect()

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

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

Ответ 7

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

Ответ 8

Протестировано в IE 11, Chrome 62, Firefox 56, Edge 38:

var box = domElement.getBoundingClientRect();
var offsetTop = Math.floor(box.top && box.top || box.y && box.y || 0);

Используйте left/x для offsetLeft.