Javascript Div 相对于视口顶部的位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1960082/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Position of Div in relation to the Top of the Viewport
提问by PF1
I am wondering how I can get the number of pixels (or measurement in general) from a div to the top of the window in Javascript. I am not looking for an offset y in relation to the document, simply to the top of where the browser is displaying. I tried the "answered" solution here: Is it possible to get the position of div within the browser viewport? Not within the document. Within the window, but at least in Safari, I am running into a problem where it returns the same number no matter where the div's really are.
我想知道如何在 Javascript 中从 div 到窗口顶部获取像素数（或一般测量）。我不是在寻找与文档相关的偏移量 y，只是在浏览器显示的顶部。我在这里尝试了“已回答”的解决方案：Is it possible to get the position of div in the browser viewport? 不在文档内。在 window 中，但至少在 Safari 中，我遇到了一个问题，即无论 div 到底在哪里，它都返回相同的数字。
Thanks for any help!
谢谢你的帮助！
回答by Himanshu P
The existing answers are now outdated. The getBoundingClientRect()method has been around for quite a while now, and does exactly what this question asks for. Plus it is supported across all browsers.
现有的答案现在已经过时了。该getBoundingClientRect()方法已经存在了很长一段时间，并且正是这个问题所要求的。此外，所有浏览器都支持它。
From thisMDN page:
从这个MDN 页面：
The returned value is a TextRectangle object, which contains read-only left, top, right and bottom properties describing the border-box, in pixels, with the top-left relative to the top-left of the viewport.
返回的值是一个 TextRectangle 对象，它包含描述边框的只读左、上、右和底部属性，以像素为单位，左上角相对于视口的左上角。
You use it like so:
你像这样使用它：
var viewportOffset = el.getBoundingClientRect();
// these are relative to the viewport
var top = viewportOffset.top;
var left = viewportOffset.left;
回答by kennebec
//First get the correct geometry for the browser
//首先为浏览器获取正确的几何图形
(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;
}
}
})()
// shortcut function
// 快捷功能
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)
}
}
回答by Pekka
Check out what the JS Frameworks have to offer. Mostly, they have worked out all - or at least most - of the browser specific problems and specialties.
查看 JS 框架必须提供什么。大多数情况下，他们已经解决了所有——或者至少是大部分——浏览器特定的问题和专业。
In Prototype, there are the scrollOffset()functions. I'm not familiar enough with JQuery to point you to the right manual page but hereis a question that seems to go towards the right direction.
在 Prototype 中，有scrollOffset()函数。我对 JQuery 不够熟悉，无法将您指向正确的手册页，但这里有一个问题似乎朝着正确的方向发展。
回答by Axiol
I've shearshed a little bit and found this :
我剪了一点，发现了这个：
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;
}
If that can help you ^^
如果可以帮到你^^
回答by Richard H
This answertells you how to get the x and y coords of an element with respect the origin (top left) of a document. You just need to add the .scrollTop value to the y coord to get the distance in pixels from div to top of viewport.
此答案告诉您如何获取元素相对于文档原点（左上角）的 x 和 y 坐标。您只需将 .scrollTop 值添加到 y 坐标即可获得从 div 到视口顶部的像素距离。
