Какой самый простой способ определить положение элементов относительно окна документа / тела / браузера?
Прямо сейчас я использую .offsetLeft/offsetTop
, но этот метод дает вам только положение относительно родительского элемента, поэтому вам нужно определить, сколько родителей у элемента body, чтобы узнать положение относительно положения тела / окна браузера / документа.
Этот метод также слишком громоздкий.
javascript
dom
Einstein
источник
источник
Вы можете попасть наверх и влево, не пересекая DOM, вот так:
источник
<html>
элемента.Вы можете использовать
element.getBoundingClientRect()
для получения позиции элемента относительно области просмотра.Затем используйте
document.documentElement.scrollTop
для вычисления смещения области просмотра.Сумма двух даст положение элемента относительно документа:
источник
document.documentElement.scrollTop
не работает в Safari, используйтеwindow.scrollY
вместо этогоЯ предлагаю использовать
как предлагается здесь вместо ручного расчета смещения через offsetLeft , offsetTop и offsetParent . как предлагается здесь. При некоторых обстоятельствах * обход вручную дает недопустимые результаты. См. Этот Plunker: http://plnkr.co/pC8Kgj
* Когда элемент находится внутри прокручиваемого родителя со статическим (= по умолчанию) позиционированием.
источник
offsetLeft
иoffsetTop
не принимаю во внимание преобразования CSS3, а этоgetBoundingClientRect()
действительно так. Так что в этом случае результаты могут быть недействительными. Если вам это нужно, вы можете получить смещение элемента относительно родительского (напримерoffsetLeft
), используя(element.getBoundingClientRect().left - parent.getBoundingClientRect().left)
.document-offset
( Сторонний скрипт ) интересен, и, похоже, он использует подходы из других ответов здесь.Пример:
источник
Я считаю, что следующий метод является наиболее надежным при работе с крайними случаями, которые приводят к отключению offsetTop / offsetLeft.
источник
Для тех, кто хочет получить координаты x и y различных положений элемента относительно документа.
использование
getCoords(document.querySelector('selector'), 'center')
getCoords(document.querySelector('selector'), 'bottom right')
getCoords(document.querySelector('selector'), 'top center')
источник
Если вы не против использования jQuery, вы можете использовать
offset()
функцию. Обратитесь к документации, если вы хотите узнать больше об этой функции.источник
http://www.quirksmode.org/js/findpos.html Объясняет лучший способ сделать это. В общем, вы на правильном пути, вам нужно найти смещения и пройти вверх по дереву родителей.
источник