如何獲取jQuery中可滾動區域內元素的絕對位置？

假設我有一個0123'與position: relative，其中一個div $foo與position: absolute。我想獲得相對於容器的位置$foo。 jQuery讓這個簡單：如何獲取jQuery中可滾動區域內元素的絕對位置？

$foo.position()

返回與top和left屬性的對象，以像素爲單位指定。問題是，如果容器向下滾動或向右滾動，則此數字不再準確。具體來說，它不會改變。 jQuery計算position()，使其等於$foo.offset() - $container.offset()（其中offset()給出窗口相對位置），並且$foo.offset()隨着用戶滾動$container而改變。

來源

2010-07-02 Trevor Burnham

添加.scrollLeft()和$container通過的$foo

這應該包括它的.position()返回值的.scrollTop() ..

更新

要找到相對父您應該使用以下內容

var $parent = $foo.parents() 
        .filter(
         function(){ 
          var position = $(this).css('position') 
          return position==='relative' || position==='absolute'; 
           } 
         ).eq(0);

來源

2010-07-02 00:45:03

是的，沒錯。我的問題很糟糕...假設你沒有'$ container'的句柄。然後怎樣呢？換句話說，你將如何定義一個'$ .fn.positionInRelativeContainer（）'函數？ – 2010-07-02 00:49:34

@Trevor，添加了一些代碼來找到最接近的親戚 – 2010-07-02 01:19:37

我不認爲代碼會起作用，原因有兩個：第一，位置==='絕對'是一個錯字，對嗎？其次，它會返回每個相對的父親，而不是最近的一個。我想如果可能有多個嵌套的滾動元素，你可以在每個元素上添加'scrollLeft（）'和'scrollTop（）'。這聽起來在計算上非常昂貴，如果您想在用戶滾動時實時重做計算，這是一個問題。 – 2010-07-02 15:12:05

看來你需要採取$foo.position()然後調整是通過添加$container的scrollTop()和scrollLeft()。

如果您實際不知道$foo的相對容器是什麼，這會變得令人討厭。我使出寫一個函數（在CoffeeScript）：

$.fn.container: -> 
    $parent: @parent() 
    if $parent.css('position') is 'relative' 
    return $parent 
    else 
    return $parent.container()

有沒有辦法，我俯瞰更直接的方式？或者直接找到一個任意元素的容器的滾動條位置？

[更新：閱讀蓋比的回答和評論後，我做了一個小的jQuery插件，通過所有元素的父母去，並增加了他們的scrollTop()和scrollLeft()該元素的position()。我沒有完全測試過，所以請嘗試一下，讓我知道它是否適用於你：jqPositionWithScrolling plugin

position()不會自動執行此操作，我敢說它是一個錯誤。

來源

2010-07-02 00:47:37

你將不得不考慮'絕對'定位的容器以及..當你到達身體標籤也停止.. – 2010-07-02 00:56:31

啊，我明白了。我忘記了'position（）'可以相對於絕對定位的元素以及相對定位的元素。（或者是一個固定的位置，除此之外，[靜態]（http://www.w3schools.com/Css/css_positioning.asp）。） – 2010-07-02 15:16:15

如何獲取jQuery中可滾動區域內元素的絕對位置？

回答

相關問題