jQuery에서 스크롤 가능한 영역 내에서 요소의 절대 위치를 얻으려면 어떻게해야합니까?

Question

div $container이 position: relative이고 div가 $foo이고 position: absolute 인 경우를 가정 해 봅시다. 컨테이너에 상대적인 $foo의 위치를 ​​얻고 싶습니다. jQuery를이 쉽게 : 픽셀 단위로 지정 top와 left 특성을 가진 개체를 반환

$foo.position() 

합니다. 문제는 컨테이너를 아래로 스크롤하거나 오른쪽으로 스크롤하면이 번호가 더 이상 정확하지 않습니다. 특히, 변경해서는 안된다. jQuery는 $foo.offset() - $container.offset() (여기서 offset()은 윈도우 상대 위치를 나타냄)과 동일하고 $container 주위를 스크롤 할 때 $foo.offset()이 변경되도록 position()을 계산합니다.

Answer 1

는

은 상대 부모를 찾기 위해

업데이트 있습니다 .. .scrollLeft()과 그것을 커버해야 $foo

의 .position()에 의해 반환 된 $container에 값 .scrollTop() 추가 다음을 사용해야합니다.

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

Answer 2

$foo.position()을 입력 한 다음 $container의 scrollTop()과 scrollLeft()을 입력하면됩니다.

$foo의 상대 컨테이너가 실제로 무엇인지 알지 못한다면 성가 시게됩니다. 나는 (CoffeeScript에서) 함수를 작성하는 의지했습니다

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

내가 내려다있어 더 직접적인 방법이 있나요? 임의의 요소의 컨테이너의 스크롤 바 위치를 직접 찾는 방법?

[업데이트 : 개비의 답변과 의견을 읽은 후, 나는 요소의 모든 부모를 통과하고 해당 요소의 position() 그들의 scrollTop() 및 scrollLeft()을 추가하는 작은 jQuery 플러그인을 요리. 나는 이것을 철저히 시험하지 않았기 때문에 시험해보고 그 효과가 있다면 알려주시기 바랍니다. jqPositionWithScrolling plugin

position()이 자동으로 수행하지 않는다는 다소 이상한 일이 있습니다. 저는 그걸 버그라고 부릅니다.]