Как получить абсолютную позицию элемента в прокручиваемой области в jQuery?

Question

Скажем, у меня есть div $container с position: relative и div $foo внутри с position: absolute. Я хочу получить позицию $foo относительно контейнера. JQuery делает это легко:

$foo.position()

, который возвращает объект со свойствами top и left, указанными в пикселях. Проблема в том, что это число больше не является точным, если контейнер прокручивается вниз или вправо. В частности, он меняется, когда не должен. jQuery вычисляет position() так, что оно эквивалентно $foo.offset() - $container.offset() (где offset() дает относительную позицию окна), а $foo.offset() изменяется, когда пользователь прокручивает $container.

Answer 1

Кажется, вам нужно взять $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

Немного странно, что position() не делает этого автоматически- Я бы осмелился назвать это ошибкой.]

Answer 2

Добавьте .scrollLeft() и .scrollTop() из $container к значениям, возвращаемым .position() из $foo

Тодолжен охватывать это ..

Обновление

Чтобы найти родителя, вы должны использовать следующее

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