Jquery положение элемента относительно окна браузера
учитывая идентификатор HTML DOM, как получить положение элемента относительно окна в JavaScript / JQuery? Это не то же самое, что относительно документа или смещения родителя, так как элемент может быть внутри iframe или некоторых других элементов. Мне нужно получить местоположение экрана прямоугольника элемента (как в положении и измерении), как он отображается в настоящее время. Отрицательные значения допустимы, если элемент в данный момент находится вне экрана (прокручивается).
Это для приложения iPad (WebKit / WebView). Всякий раз, когда пользователь нажимает на специальную ссылку в UIWebView , Я должен открыть диалоговое окно, которое отображает дополнительную информацию о ссылке. В представлении popover должна отображаться стрелка, указывающая на ту часть экрана, которая вызывает его.
первоначально, захватить .смещение положение элемента и вычислить его относительное положение относительно окна
вы можете дать ему попробовать в этой скрипка
после нескольких строк кода объясняется, как это может быть решено
, когда .свиток выполняется событие, вычисляется относительное положение элемента относительно объекта окна
когда прокрутка выполняется в браузере, мы вызываем вышеуказанную функцию обработчика событий
попробуйте ограничивающую рамку. Это просто:
вы можете назвать это так
я фокусируюсь на IE только в соответствии с моим требованием, но подобное можно сделать для других браузеров
это больше похоже на то, что вы хотите всплывающую подсказку для выбранной ссылки. Есть много подсказок jQuery, попробуйте jQuery qTip. Она имеет много вариантов и легко изменить стили.
существует также jQuery .offset (); который вернет положение относительно документа.
TL; DR
.getBoundingClientRect() кажется универсальная. .offset () и .scrollTop() поддерживаются начиная с jQuery 1.2. Спасибо @user372551 и @prograhammer. Чтобы использовать DOM в iframe, см. решение @ ImranAnsari.
В jQuery определить положение элемента на странице можно посредством методов offset() и position() .
Первый метод ( offset ) позволяет узнать положение элемента относительно левого верхнего угла страницы (объекта document ). Второй же метод ( position ) выполняет это относительно левого верхнего угла ближайшего предка, который расположен вне основного потока (т.е. имеет в качестве значения свойства position значение absolute , fixed , relative или sticky ). Если же у элемента нет такого предка, они все располагаются в нормальном потоке, то его положение будет рассчитываться аналогично тому, как это выполняет метод offset() , т.е. относительно верхнего левого угла страницы.
В качестве результата данные методы возвращают объект, содержащий два свойства:
- top – положение относительно верхней границы документа или ближайшего предка;
- left – положение относительно левой границы документа или ближайшего предка.
Примечание: Если выборка содержит несколько элементов, то методы offset и position возвращают текущие координаты только для первого из них.
Установка координат
Кроме этого метод offset позволяет также установить координаты. Осуществляет это он относительно левого верхнего угла страницы (объекта document ) для всех элементов текущего набора.
Установка координат осуществляется посредством указания одного из следующих значений в качестве параметра:
- объекта, содержащего свойства left и top ;
- функции, которая в качестве результата должна возвращать объект со свойствами left и top (в качестве аргументов ей передаются индекс текущего элемента в выбранном наборе и текущие координаты этого элемента в виде объекта).
Рассмотрим как осуществляется установка координат с помощью следующих примеров.
Пример 1. При клике на элемент с id="mydiv" будем увеличивать его текущие координаты относительно документа на 50px по X и по Y.
Пример 2. При клике на одном из трёх элементов с классом blocks будем:
- у первого элемента (индекс 0 в наборе) увеличивать его Y-координату на 50px;
- у второго элемента (индекс 1 в наборе) увеличивать его X-координату на 50px;
- у третьего элемента (индекс 2 в наборе) увеличивать его X и Y координаты на 50px.
Примечание: Метод position не имеет функционала для установки координат, он может использоваться только для их чтения в соответствии с алгоритмом приведённым выше.
В этой теме рассмотрим свойства объекта window, которые предназначены для получения внутренних ( innerWidth , innerHeight ) и внешних ( outerWidth , outerHeight ) размеров окна, его положения относительно экрана ( screenLeft , screenTop ) и координат прокрутки страницы ( pageXOffset и pageYOffset ) в JavaScript.
Свойства innerWidth и innerHeight
innerWidth – это свойство, которое позволяет получить внутреннюю ширину окна в пикселях (включая при этом в этот размер ширину вертикальной полосы прокрутки при её наличии).
innerHeight , в отличие от innerWidth предназначено соответственно для возвращения внутренней высоты окна в пикселях.
Свойства innerWidth и innerHeight доступны только для чтения и не имеют значения по умолчанию.
Если код выполняется в контексте объекта window , то его свойства и методы можно использовать без указания window :
Если вам нужно узнать внутреннюю ширину окна за вычетом ширины его вертикальной полосы прокрутки и любых границ, то используйте свойство clientWidth элемента :
Получение внутренней высоты окна без учёта горизонтальной полосы прокрутки и границ выполняется через clientHeight элемента :
Пример, в котором мы выведем на страницу данные о внутренних размерах окна:
onresize – это свойство, посредством которого мы назначили обработчик для события resize для window .
outerWidth и outerHeight
Свойства « window.outerWidth » и « window.outerHeight » применяются довольно редко. Они предназначены для получения соответственно ширины и высоты всего окна браузера (включая границы самого окна, панель закладок и т.д.).
Пример, в котором мы выведем данные о внешних размерах окна на экран:
screenX и screenY (screenLeft и screenTop)
« window.screenX » и « window.screenY » предназначены для получения положения окна браузера (т.е. его x и y координат) относительно экрана.
В Internet Explorer 8 и более ранних версиях, объект window не содержит свойств screenX и screenY . В них это выполняется через « window.screenLeft » и « window.screenTop ». В то же время Mozilla Firefox (до версии 64) поддерживает только « window.screenX » и « window.screenY ». Остальные браузеры поддерживает как один, так и другой вариант свойств.
Например, выведем координаты окна браузера относительно экрана при клике на ссылку:
scrollX и scrollY (pageXOffset и pageYOffset)
scrollX и scrollY используются, когда нужно получить количество пикселей, на которые документ пролистали в данный момент соответственно по горизонтали и вертикали. Эти свойства доступны только для чтения.
Возвращаемое ими значение является числом с плавающей точкой. Для того чтобы сделать его целочисленным, можно, например, воспользоваться методом Math.round() :
Определить, был ли пролистан контент можно, например так:
Нахождение в переменной hasScrolling значения false будет говорить о том, что контент в данный момент не пролистан, true – в противном случае.
Пример, в котором мы выведем на экран информацию о значениях прокрутки:
onscroll – это свойство, посредством которого мы назначили обработчик для события scroll для window .
Свойства pageXOffset и pageYOffset идентичны соответственно scrollX и scrollY .
Кроссбраузерное решение (в браузерах в которых не поддерживаются свойства window.scrollX и window.scrollY будут использоваться window.pageXOffset и window.pageYOffset ):
How do I find out the absolute position of an element on the current visible screen (viewport) using jQuery?
I am having position:relative , so offset() will only give the offset within the parent.
I need the position in the window, not the document, so when the document is scrolled, the value should change.
I know I could add up all the parent offsets, but I want a cleaner solution.
Update: I need to get the exact gap in pixels between the top of my div and the top of the document, including padding/margins/offset?
HTML
CSS
jQuery to resize the map to fill the screen*
offset() returns the offset relative to the document, does'nt matter how you've positioned your elements. How would the position of an element relative to, well anything, change on scroll? Are you sure you're not just looking for scrollTop() ?
That distance is the scrollTop, and has nothing to do with the elements position, as elements are positioned whitin the document, and the window is what you see in your browser. And no, when the element is positioned relative, offset still returns the offset relative to the document, try it out and see. See the answer below, it should pretty much cover it.
3 Answers 3
See .offset() here in the jQuery doc. It gives the position relative to the document, not to the parent. You perhaps have .offset() and .position() confused. If you want the position in the window instead of the position in the document, you can subtract off the .scrollTop() and .scrollLeft() values to account for the scrolled position.
Here's an excerpt from the doc:
The .offset() method allows us to retrieve the current position of an element relative to the document. Contrast this with .position(), which retrieves the current position relative to the offset parent. When positioning a new element on top of an existing one for global manipulation (in particular, for implementing drag-and-drop), .offset() is the more useful.
каков правильный способ получить положение элемента на странице относительно окна просмотра (а не документа). jQuery.offset функция казалась многообещающей:
получить текущие координаты первого элемента, или установить координаты каждого элемента в наборе совпавших элементов, относительной к документу.
но это относительно документа. Есть ли эквивалентный метод, который возвращает смещения относительно иллюминатор?
самый простой способ определить размер и положение элемента, чтобы вызвать его getBoundingClientRect() метод. Этот метод возвращает позиции элементов в координатах видового экрана. Он не ожидает аргументов и возвращает объект с свойства влево, вправо, вверх и дно. Свойства left и top дают X и Y координаты верхнего левого угла элемента и свойства Right и bottom дайте координаты нижнего правого угол.
element.getBoundingClientRect(); // Get position in viewport coordinates
вот две функции, чтобы получить высоту страницы и количество прокрутки (x, y) без использования плагина (раздутые) размеры:
jQuery.offset необходимо объединить с scrollTop и scrollLeft как показано на этой диаграмме:
вот функция, которая вычисляет текущее положение элемента в окне просмотра:
возвращаемые значения вычисляются следующим образом:
я обнаружил, что ответ cballou больше не работает в Firefox с января. 2014. В частности, if (self.pageYOffset) не срабатывает, если клиент прокрутил вправо, но не вниз-потому что 0 - номер falsey. Некоторое время это оставалось незамеченным, потому что Firefox поддерживал document.body.scrollLeft / Top , но это больше не работает для меня (в Firefox 26.0).
вот мое измененное решение:
протестировано и работает в FF26, Chrome 31, IE11. Почти наверняка работает на старые версии всех из них.
Читайте также: