Как вычислить (получить) позицию html елемента. offsetTop и offsetLeft даёт относительное значение (не всегда отчёт от точки [x=0,y=0] начала координат). Гугл даёт "недоделанный" вариант http://javascript.ru/ui/offset.
Не "как динамический во время scroll определить текущее местоположение элемента по отношению к родителю", а как получить абсолютные координаты относительно левого верхнего угла содержимого страницы.
Второй вопрос "определить текущее местоположение элемента по отношению к родителю" ещё раз повторяю, абсолютные координаты относительно левого верхнего угла содержимого страницы.
Нужно для "подвешивания" элементов к текущей верстке (что бы вывести на/возле определённого элемента подсказку, сообщение, рекламу и т.п.) например так:
document.getElementById("act_holder").style.position= "absolute";
document.getElementById("act_holder").style.display = "block";
document.getElementById("act_holder").style.top =
(getOffset(document.getElementById("act_hlp")).top - 75 ) + "px";
document.getElementById("act_holder").innerHTML = "элемент занят";
при использовании absolute нужны координаты относительно левого верхнего угла.
Ответ
Вот код с javascript.ru собраный до кучи.
function getOffset(elem) {
if (elem.getBoundingClientRect) {
var box = elem.getBoundingClientRect();
var body = document.body;
var docElem = document.documentElement;
var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
var clientTop = docElem.clientTop || body.clientTop || 0;
var clientLeft = docElem.clientLeft || body.clientLeft || 0;
return { top: Math.round(box.top + scrollTop - clientTop), left: Math.round(box.left + scrollLeft - clientLeft) }
} else {
var top=0, left=0
while(elem) {
top = top + parseFloat(elem.offsetTop);
left = left + parseFloat(elem.offsetLeft);
elem = elem.offsetParent ;
}
return {top: top, left: left};
}
}
Немного комментариев:
ф-ция getBoundingClientRect вызвала спор, mozilla цитата
Возвращаемое значение getBoundingClientRect — это объект TextRectangle, содержащий свойства
только для чтения left, top, right и bottom, описывающие бокс с
границами в пиксельном измерении. Значения top и left даются
относительно верхнего левого угла порта просмотра.
т.е. уже с учётом скролла и отступов документа, которые приходится вычитать если нужны координаты относительно начала системы координат листа (левый верхний угол документа). Даная функция getBoundingClientRect даст верный результат, если выполняется два условия: 1) позиция скроллинга ноль (на старте часто так), 2) если у документа (body) отступы не заданы, или заданы в ноль. Так как эти условия не всегда соблюдены - приходится использывать более сложные решения.
От себя добавлю, что если используется система отчёта position=fixed то getBoundingClientRect выдаст координаты которые подойдут к этой системе отчёта, но fixed редко используется, поскольку при изменении позиции скрола - позиция на экране сохраняется и елемент будет "плавать". А для absolute и static прийдётся делать пересчёт коодинат. Система relative - просто относительные координаты, в отдельных случаях её можно использовать.
Комментариев нет:
Отправить комментарий