Мне интересно, как я могу получить количество пикселей (или измерение в целом) от div до вершины окна в Javascript. Я не ищу смещение y относительно документа, просто вверху, где отображается браузер. Я попробовал "ответ" здесь: Возможно ли получить позицию div в окне просмотра браузера? Не внутри документа. Внутри окна, но, по крайней мере, в Safari, я столкнулся с проблемой, когда он возвращает тот же номер независимо от того, где действительно находится div.
Спасибо за любую помощь!
Существующие ответы теперь устарели. Метод getBoundingClientRect() существует уже довольно долгое время и делает именно то, что задает этот вопрос. Кроме того, он поддерживается во всех браузерах.
Из this MDN-страница:
Возвращаемое значение - это объект TextRectangle, который содержит свойства слева, сверху, справа и снизу, описывающие рамку в пикселях, с верхним левым относительно левого верхнего угла окна просмотра.
Вы используете его так:
var viewportOffset = el.getBoundingClientRect();
// these are relative to the viewport
var top = viewportOffset.top;
var left = viewportOffset.left;
//Сначала получим правильную геометрию для браузера
(function(){
Run= window.Run || {};
if(window.pageYOffset!= undefined){
Run.topLeftScroll= function(hoo){
var wo= [window.pageXOffset, window.pageYOffset]
if(hoo && hoo.nodeType== 1){
hoo= mr(hoo);
var T= 0, L= 0;
while(hoo){
L+= hoo.offsetLeft;
T+= hoo.offsetTop;
hoo= hoo.offsetParent;
}
wo= [L, T, wo[0], wo[1]];
}
return wo;
}
}
else if(document.body.scrollTop!== undefined){
Run.topLeftScroll= function(hoo){
var B= document.body;
var D= document.documentElement;
D= (D.clientHeight)? D: B;
wo= [D.scrollLeft, D.scrollTop];
if(hoo && hoo.nodeType== 1){
hoo= mr(hoo);
var T= 0, L= 0;
while(hoo){
L+= hoo.offsetLeft;
T+= hoo.offsetTop;
hoo= hoo.offsetParent;
}
wo= [L, T, wo[0], wo[1]];
}
return wo;
}
}
})()
//функция быстрого доступа
if(window.Run && Run.topLeftScroll){
Run.getPosition= function(who, wch){
var A= Run.topLeftScroll(who);
if(!wch) return A;
switch(wch.toUpperCase()){
case 'X': return A[0];// element Left in document
case 'Y': return A[1];// element Top in document
case 'L': return A[0]-A[2];// Left minus scroll
case 'T': return A[1]-A[3];// Top minus scroll
case 'SL': return A[2];// scroll Left
case 'ST': return A[3];// scroll Top
default: return 0;
}
// all returns are integers (pixels)
}
}
Узнайте, что могут предложить JS Framework. В основном, они разработали все - или, по крайней мере, большинство - проблемы и особенности браузера.
В Prototype существуют функции scrollOffset(). Я недостаточно знаком с JQuery, чтобы указать вам на правильную страницу руководства, но здесь - это вопрос, который, похоже, идет в правильном направлении.
Я немного поникнул и нашел это:
function getOffsetPosition(el_id, side){
element = document.getElementById(el_id);
newNode = document.createElement("div");
newNode.innerHTML = "<div style=\"height: 12px;\"></div>";
element.insertBefore(newNode, element.firstChild);
iVal = 0;
oObj = element;
var sType = "oObj.offset"+side;
while (oObj && oObj.tagName != "html") {
iVal += eval(sType);
oObj = oObj.offsetParent;
}
element.removeChild(newNode);
return iVal;
}
Если это может помочь вам ^^
Этот ответ сообщает вам, как получить координаты x и y элемента относительно исходного (вверху слева) документа. Вам просто нужно добавить значение .scrollTop к координате y, чтобы получить расстояние в пикселях от div до вершины окна просмотра.