Возможно ли получить позицию div в окне просмотра браузера? Не внутри документа. Внутри окна

Ответ 1

Вы можете сделать это в обоих - получить позицию относительно документа, а затем вычесть позицию прокрутки.

var e = document.getElementById('xxx');
var offset = {x:0,y:0};
while (e)
{
    offset.x += e.offsetLeft;
    offset.y += e.offsetTop;
    e = e.offsetParent;
}

if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft))
{
    offset.x -= document.documentElement.scrollLeft;
    offset.y -= document.documentElement.scrollTop;
}
else if (document.body && (document.body.scrollTop || document.body.scrollLeft))
{
    offset.x -= document.body.scrollLeft;
    offset.y -= document.body.scrollTop;
}
else if (window.pageXOffset || window.pageYOffset)
{
    offset.x -= window.pageXOffset;
    offset.y -= window.pageYOffset;
}

alert(offset.x + '\n' + offset.y);

Ответ 2

Попробуйте размер плагина jQuery. Смотрите эту демонстрацию.

$('#myelement.').offset();

Ответ 3

[Вставка из ответа, который я дал здесь]

Нативный метод getBoundingClientRect() существует уже довольно давно и делает именно то, что задает этот вопрос. Кроме того, он поддерживается во всех браузерах (включая IE 5, кажется!)

От this Страница MDN:

Возвращаемое значение - это объект TextRectangle, который содержит свойства слева, сверху, справа и снизу, описывающие рамку в пикселях, с верхним левым относительно левого верхнего угла окна просмотра.

Вы используете его так:

var viewportOffset = el.getBoundingClientRect();
// these are relative to the viewport, i.e. the window
var top = viewportOffset.top;
var left = viewportOffset.left;

Ответ 4

В IE и Firefox 3 вы можете использовать getBoundingClientRect; нет необходимости в каркасе.

Но да, вы должны использовать фреймворк, если вам нужно также поддерживать другие браузеры.

Ответ 5

Вы можете вычесть div offsetTop из документа .body.scrollTop

Это, похоже, работает на IE7 и FF3, но на очень простой странице. Я не проверял с вложенными DIV.

Ответ 6

Используя Prototype, это будет:

$('divname').viewportOffset.top
$('divname').viewportOffset.left