jQuery获取元素相对于窗口的位置


168

给定一个HTML DOM ID,如何在JavaScript / JQuery中获取元素相对于窗口的位置?相对于文档或偏移父对象而言,这是不同的,因为该元素可能位于iframe或某些其他元素内。我需要获取当前显示的元素矩形的屏幕位置(在位置和尺寸上)。如果该元素当前处于屏幕外(已滚动显示),则可以接受负值。

这适用于iPad(WebKit / WebView)应用程序。每当用户点击中的特殊链接时UIWebView,我都应该打开一个弹出视图,以显示有关该链接的更多信息。弹出视图需要显示一个箭头,该箭头指向调用它的屏幕部分。

Answers:


264

最初,抓住元素的.offset位置并计算其相对于窗口的相对位置

请参阅
1. 偏移量
2. 滚动
3. scrollTop

您可以在这个小提琴中尝试一下

以下几行代码说明了如何解决此问题

当执行.scroll事件时,我们计算元素相对于窗口对象的相对位置

$(window).scroll(function () {
    console.log(eTop - $(window).scrollTop());
});

当在浏览器中执行滚动时,我们调用上面的事件处理函数

程式码片段


function log(txt) {
  $("#log").html("location : <b>" + txt + "</b> px")
}

$(function() {
  var eTop = $('#element').offset().top; //get the offset top of the element
  log(eTop - $(window).scrollTop()); //position of the ele w.r.t window

  $(window).scroll(function() { //when window is scrolled
    log(eTop - $(window).scrollTop());
  });
});
#element {
  margin: 140px;
  text-align: center;
  padding: 5px;
  width: 200px;
  height: 200px;
  border: 1px solid #0099f9;
  border-radius: 3px;
  background: #444;
  color: #0099d9;
  opacity: 0.6;
}
#log {
  position: fixed;
  top: 40px;
  left: 40px;
  color: #333;
}
#scroll {
  position: fixed;
  bottom: 10px;
  right: 10px;
  border: 1px solid #000;
  border-radius: 2px;
  padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="log"></div>

<div id="element">Hello
  <hr>World</div>
<div id="scroll">Scroll Down</div>


1
感谢您的脚本。这似乎可以在桌面上使用,但不能在iPad上使用。似乎$(window).scrollTop()和$(window).scrollLeft()在iPad中没有更新。您可以通过尝试我的版本jsbin.com/ogiwu4/5
阿迪

2
它们不会在iPad上更新,因为窗口本身不会滚动-用户正在窗口内部滚动。无论如何,对于一个基本网站就是这种情况,不确定一个针对移动设备的网站,那里可能有更多选择。
eselk

当一个元素位于另一个可滚动元素(例如,)中时,此操作将失败。G。<div>。您仅考虑文档滚动,而不考虑其他元素滚动。
ygoe

71

尝试边界框。这很简单:

var leftPos  = $("#element")[0].getBoundingClientRect().left   + $(window)['scrollLeft']();
var rightPos = $("#element")[0].getBoundingClientRect().right  + $(window)['scrollLeft']();
var topPos   = $("#element")[0].getBoundingClientRect().top    + $(window)['scrollTop']();
var bottomPos= $("#element")[0].getBoundingClientRect().bottom + $(window)['scrollTop']();

7
getBoundingClientRect()是此问题的答案。谢谢您的亲。
Vlad Lego 2015年

1
这很好。除了您的scrollLetf和scrollTop之外,我只需要包含一些代码即可修复滚动:topPos = topPos-$(window).scrollTop(); leftPos = leftPos-$(window).scrollLeft(); rightPos = rightPos-$(window).scrollTop(); bottomPos = bottomPos-$(window).scrollLeft();
塞萨尔(Cesar)2016年

1
人们将要学习以一种很好的有用方法将事物包装起来的一天
mmm

@Noldorin对我来说,IE / Edge上的支持看起来不错:caniuse.com/#feat=getboundingclientrect
prograhammer

1
@prograhammer我不好,你是对的。我在某个网站上阅读了此书,并以其面值表达了自己的诺言……事实证明这是错误的(或者至少在旧IE上不起作用)。
Noldorin

6
function getWindowRelativeOffset(parentWindow, elem) {
        var offset = {
            left : 0,
            top : 0
        };
        // relative to the target field's document
        offset.left = elem.getBoundingClientRect().left;
        offset.top = elem.getBoundingClientRect().top;
        // now we will calculate according to the current document, this current
        // document might be same as the document of target field or it may be
        // parent of the document of the target field
        var childWindow = elem.document.frames.window;
        while (childWindow != parentWindow) {
            offset.left = offset.left + childWindow.frameElement.getBoundingClientRect().left;
            offset.top = offset.top + childWindow.frameElement.getBoundingClientRect().top;
            childWindow = childWindow.parent;
        }
        return offset;
    };

你可以这样称呼它

getWindowRelativeOffset(top, inputElement);

我只按照我的要求专注于IE,但其他浏览器也可以做到类似


4

这听起来更像是您想要为链接选择一个工具提示。有很多jQuery工具提示,请尝试使用jQuery qTip。它具有很多选项,并且易于更改样式。

否则,如果您想自己执行此操作,则可以使用jQuery .position()。有关更多信息,请.position()访问http://api.jquery.com/position/

$("#element").position(); 将返回元素相对于偏移父级的当前位置。

还有jQuery .offset(); 这将返回相对于文档的位置。


2
它实际上不是工具提示,而是打开一个本机UI小部件以添加注释。
adib 2010年


1
    function trbl(e, relative) {
            var r = $(e).get(0).getBoundingClientRect(); relative = $(relative);

            return {
                    t : r.top    + relative['scrollTop'] (),
                    r : r.right  + relative['scrollLeft'](),
                    b : r.bottom + relative['scrollTop'] (),
                    l : r.left   + relative['scrollLeft']() 

            }
    }

    // Example
    trbl(e, window);

1

尝试此操作以获取元素相对于窗口的位置。

        $("button").click(function(){
            var offset = $("#simplebox").offset();
            alert("Current position of the box is: (left: " + offset.left + ", top: " + offset.top + ")");
        });
    #simplebox{
        width:150px;
        height:100px;
        background: #FBBC09;
        margin: 150px 100px;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button">Get Box Position</button>
    <p><strong>Note:</strong> Play with the value of margin property to see how the jQuery offest() method works.</p>
    <div id="simplebox"></div>

查看更多@ 使用jQuery获取元素相对于文档的位置

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.