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

Question

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

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

Answer 1

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

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 post.

Answer 2

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

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; 
} 

Answer 3

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

node.offsetTop - window.scrollY

Он работает на Opera с видового экрана метатеге определены.

Answer 4

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

Answer 5

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

От MDN page:

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

Вы можете использовать его так:

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

Answer 6

Я предполагаю, что элемент, имеющий идентификатор 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 7

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

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

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

Answer 8

Иногда 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 9

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

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

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