40

我想知道如何在 Javascript 中获取从 div 到窗口顶部的像素数（或一般测量值）。我不是在寻找与文档相关的偏移 y，只是在浏览器显示的顶部。我在这里尝试了“已回答”的解决方案：是否可以在浏览器视口中获取 div 的位置？不在文件内。在 window中，但至少在 Safari 中，我遇到了一个问题，即无论 div 实际在哪里，它都会返回相同的数字。

谢谢你的帮助！

4

5 回答 5

82

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

从这个MDN 页面：

返回的值是一个 TextRectangle 对象，它包含描述边界框的只读 left、top、right 和 bottom 属性，以像素为单位，左上角相对于视口的左上角。

你像这样使用它：

var viewportOffset = el.getBoundingClientRect();
// these are relative to the viewport
var top = viewportOffset.top;
var left = viewportOffset.left;
于 2013-09-13T20:39:31.950 回答
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)
 }
}
于 2009-12-25T02:24:38.027 回答
0

查看 JS 框架必须提供的内容。大多数情况下，他们已经解决了所有 - 或至少大部分 - 浏览器特定问题和专业。

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

于 2009-12-25T00:11:58.887 回答
-1

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

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

如果能帮到你^^

于 2009-12-25T00:23:01.407 回答
-3

此答案告诉您如何获取元素相对于文档原点（左上角）的 x 和 y 坐标。您只需将 .scrollTop 值添加到 y 坐标即可获得从 div 到视口顶部的像素距离。

于 2009-12-25T00:18:57.967 回答