Каков правильный способ получить позицию элемента на странице относительно области просмотра (а не документа). jQuery.offset
функция казалась многообещающей:
Получить текущие координаты первого элемента или установить координаты каждого элемента в наборе согласованных элементов относительно документа.
Но это относительно документа. Есть ли эквивалентный метод, который возвращает смещения относительно области просмотра?
Ответы:
Загляните в плагин Dimensions, в частности
scrollTop()
/scrollLeft()
. Информацию можно найти на http://api.jquery.com/scrollTop .источник
Самый простой способ определить размер и положение элемента - вызвать его метод getBoundingClientRect () . Этот метод возвращает позиции элементов в координатах области просмотра. Он не ожидает аргументов и возвращает объект со свойствами left, right, top и bottom . Свойства left и top задают координаты X и Y левого верхнего угла элемента, а свойства right и bottom задают координаты правого нижнего угла.
element.getBoundingClientRect(); // Get position in viewport coordinates
Поддерживается везде.
источник
getBoundingClientRect is not a function
$('#myElement')[0].getBoundingClientRect().top
(или в любой другой позиции)Вот две функции для получения высоты страницы и количества прокрутки (x, y) без использования (раздутого) плагина размеров:
источник
jQuery.offset
должны сочетаться сscrollTop
и,scrollLeft
как показано на этой диаграмме:Демо-версия:
источник
Вот функция, которая вычисляет текущую позицию элемента в области просмотра:
Возвращаемые значения рассчитываются следующим образом:
Использование:
Демо-версия:
источник
Я обнаружил, что ответ cballou больше не работает в Firefox с января 2014 года. В частности,
if (self.pageYOffset)
не срабатывает, если клиент прокручивает вправо, но не вниз, потому что0
это ложное число. Некоторое время это оставалось незамеченным, потому что Firefox поддерживалdocument.body.scrollLeft
/Top
, но у меня это больше не работает (в Firefox 26.0).Вот мое модифицированное решение:
Протестировано и работает в FF26, Chrome 31, IE11. Почти наверняка работает на более старых версиях всех из них.
источник