Как получить верхнюю позицию элемента относительно окна просмотра браузера?

Question

Я хочу получить позицию элемента относительно области просмотра браузера (область просмотра, в которой отображается страница, а не вся страница). Как это можно сделать в JavaScript?

Большое спасибо

Answer 1

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

С Страница MDN :

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

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

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

Answer 2

В моем случае, просто для безопасности при прокрутке, я добавил window.scroll к уравнению:

var element = document.getElementById('myElement');
var topPos = element.getBoundingClientRect().top + window.scrollY;
var leftPos = element.getBoundingClientRect().left + window.scrollX;

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

Answer 3

Редактировать: Добавить код для учета прокрутки страницы.

function findPos(id) {
    var node = document.getElementById(id);     
    var curtop = 0;
    var curtopscroll = 0;
    if (node.offsetParent) {
        do {
            curtop += node.offsetTop;
            curtopscroll += node.offsetParent ? node.offsetParent.scrollTop : 0;
        } while (node = node.offsetParent);

        alert(curtop - curtopscroll);
    }
}

Аргумент id - это идентификатор элемента, смещение которого вы хотите. Адаптировано из сообщения quirksmode .

Answer 4

var element =  document.querySelector('selector');
var bodyRect = document.body.getBoundingClientRect(),
    elemRect = element.getBoundingClientRect(),
    offset   = elemRect.top - bodyRect.top;

Answer 5

Вы можете попробовать:

node.offsetTop - window.scrollY

Работает в Opera с определенным метатегом viewport.

Answer 6

jQuery реализует это довольно элегантно. Если вы посмотрите на источник для offset в jQuery, то обнаружите, что в основном это реализовано:

var rect = elem.getBoundingClientRect();
var win = elem.ownerDocument.defaultView;

return {
    top: rect.top + win.pageYOffset,
    left: rect.left + win.pageXOffset
};

Answer 7

Иногда getBoundingClientRect() значение свойства объекта показывает 0 для IE. В этом случае вы должны установить display = 'block' для элемента. Вы можете использовать код ниже для всех браузеров, чтобы получить смещение.

Расширение функциональности jQuery:

(function($) {
    jQuery.fn.weOffset = function () {
        var de = document.documentElement;
        $(this).css("display", "block");
        var box = $(this).get(0).getBoundingClientRect();
        var top = box.top + window.pageYOffset - de.clientTop;
        var left = box.left + window.pageXOffset - de.clientLeft;
        return { top: top, left: left };
    };
}(jQuery));

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

var elementOffset = $("#" + elementId).weOffset();

Answer 8

Я предполагаю, что на веб-странице существует элемент с идентификатором btn1, а также включен jQuery. Это работало во всех современных браузерах Chrome, FireFox, IE> = 9 и Edge. jQuery используется только для определения позиции относительно документа.

var screenRelativeTop =  $("#btn1").offset().top - (window.scrollY || 
                                            window.pageYOffset || document.body.scrollTop);

var screenRelativeLeft =  $("#btn1").offset().left - (window.scrollX ||
                                           window.pageXOffset || document.body.scrollLeft);

Answer 9

Спасибо за все ответы. Кажется, в Prototype уже есть функция, которая делает это (функция page ()). Просматривая исходный код функции, я обнаружил, что она сначала вычисляет позицию смещения элемента относительно страницы (то есть верх документа), а затем вычитает из этого scrollTop. Смотрите исходный код прототипа для более подробной информации.

Answer 10

Функция на этой странице возвращает прямоугольник с координатами сверху, слева, высотой и шириной переданного элемента относительно порта просмотра браузера.

    localToGlobal: function( _el ) {
       var target = _el,
       target_width = target.offsetWidth,
       target_height = target.offsetHeight,
       target_left = target.offsetLeft,
       target_top = target.offsetTop,
       gleft = 0,
       gtop = 0,
       rect = {};

       var moonwalk = function( _parent ) {
        if (!!_parent) {
            gleft += _parent.offsetLeft;
            gtop += _parent.offsetTop;
            moonwalk( _parent.offsetParent );
        } else {
            return rect = {
            top: target.offsetTop + gtop,
            left: target.offsetLeft + gleft,
            bottom: (target.offsetTop + gtop) + target_height,
            right: (target.offsetLeft + gleft) + target_width
            };
        }
    };
        moonwalk( target.offsetParent );
        return rect;
}