Div相对于视口顶部的位置

Question

我想知道如何在Javascript中从div到窗口顶部获取像素数（或一般测量值）。我不是在寻找与文档相关的偏移y，只是在浏览器显示的顶部。我在这里尝试了“回答”解决方案：Is it possible to get the position of div within the browser viewport? Not within the document. Within the window，但至少在Safari中，我遇到了一个问题，无论div到底在哪里，它都返回相同的数字。

谢谢你的帮助！

Answer 1

现有答案现已过时。 getBoundingClientRect()方法已经存在了很长一段时间，并且正是这个问题所要求的。此外，它支持所有浏览器。

来自this MDN页面：

返回的值是一个TextRectangle对象，它包含描述border-box的只读左，上，右和底属性，以像素为单位，左上角相对于视口的左上角。

你这样使用它：

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

Answer 2

//首先获取浏览器的正确几何图形

(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)
 }
}

Answer 3

看看JS框架提供什么。大多数情况下，他们已经解决了所有（或至少大多数）浏览器特定问题和专业问题。

在Prototype中，有scrollOffset()函数。我对JQuery不够熟悉，无法向您指出正确的手册页，但here似乎是一个朝着正确方向发展的问题。

Answer 4

我已经剪了一点，发现了这个：

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

如果那可以帮助你^^

Answer 5

这个answer告诉你如何获得元素的x和y坐标，而不是文档的原点（左上角）。您只需要将.scrollTop值添加到y坐标，以获得从div到视口顶部的距离（以像素为单位）。