我想知道如何在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到底在哪里都会返回相同的数字。
感谢您的帮助!
答案 0 :(得分:66)
现有答案现已过时。 getBoundingClientRect()
方法已经存在了很长一段时间,而且正是这个问题所要求的。此外,它支持所有浏览器。
来自this MDN页面:
返回的值是一个TextRectangle对象,它包含描述边框的只读左,上,右和底属性(以像素为单位),左上角相对于左上角视口。
你这样使用它:
var viewportOffset = el.getBoundingClientRect();
// these are relative to the viewport
var top = viewportOffset.top;
var left = viewportOffset.left;
答案 1 :(得分: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)
}
}
答案 2 :(得分:0)
查看JS框架提供的内容。大多数情况下,他们已经解决了所有(或至少大多数)浏览器特定问题和专业问题。
在Prototype中,有scrollOffset()个函数。我对JQuery不太熟悉,无法向您指出正确的手册页,但here是一个似乎正朝着正确方向发展的问题。
答案 3 :(得分:-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;
}
如果可以帮到你^^
答案 4 :(得分:-3)
这个answer告诉您如何获取元素的x和y坐标,而不是文档的原点(左上角)。您只需要将.scrollTop值添加到y坐标,以获得从div到视口顶部的距离(以像素为单位)。