como obter o deslocamento correto de um elemento?

86

Esta é provavelmente uma pergunta muito simples, mas como faço para obter o deslocamento correto de um elemento no jQuery?

Eu posso fazer:

$("#whatever").offset().left;

e é válido.

Mas parece que:

$("#whatever").offset().right

é indefinido.

Então, como fazer isso no jQuery?

Obrigado!!

jquery offset

— Alex
fonte

161

Alex, Gary:

Conforme solicitado, aqui está meu comentário postado como uma resposta:

var rt = ($(window).width() - ($whatever.offset().left + $whatever.outerWidth()));

Obrigado por me avisar.

Em pseudocódigo que pode ser expresso como:

O deslocamento correto é:

A largura da janela MENOS
(o deslocamento esquerdo do elemento MAIS a largura externa do elemento )

— Brendon Crawford
fonte

isso não funciona com transformações CSS, o deslocamento será afetado pela transformação, mas outerWidth (e largura) não.

— Jonathan.

2

Este é o deslocamento do lado direito da janela. Para o deslocamento do lado esquerdo da janela, consulte a resposta do cdZ .

— Codebling

a extremidade direita de um elemento pode ser encontrada de forma mais "nativa" $whatever[0].getBoundingClientRect().right. isso é relativo à borda esquerda da janela.

— pstanton,

Obrigado, brendon. Resposta útil.

29

var $whatever        = $('#whatever');
var ending_right     = ($(window).width() - ($whatever.offset().left + $whatever.outerWidth()));

Referência: .outerWidth ()

— Andy
fonte

1

Acho que preciso adicioná-los e depois menos 1. se a largura for 2, então a esquerda está em 10 e a direita não está em 12, mas em 11.

— polaridade

31

Esta é uma resposta incorreta. Em CSS, "esquerda" implica "o deslocamento do ponto mais à esquerda do elemento da esquerda da janela / pai" e "direita" implica "o deslocamento do ponto mais à direita do elemento à direita da janela / pai " Portanto, a resposta correta seria:var rt = ($(window).width() - ($whatever.offset().left + $whatever.outerWidth()));

— Brendon Crawford

5

@BrendonCrawford Você deve mover esse comentário para uma resposta.

— Gary

3

Uma nota para qualquer pessoa que passar - a resposta acima foi editada para refletir corretamente o comentário feito por Brendon.

— Chris Marasti-Georg

16

Talvez eu não tenha entendido sua pergunta, mas o deslocamento deve fornecer a você duas variáveis: uma horizontal e uma vertical. Isso define a posição do elemento. Então, o que você está procurando é:

$("#whatever").offset().left

e

$("#whatever").offset().top

Se você precisa saber onde está o limite correto do seu elemento, você deve usar:

$("#whatever").offset().left + $("#whatever").outerWidth()

— Greg
fonte

9

Apenas uma adição ao que Greg disse:

$ ("# qualquer coisa"). offset (). esquerda + $ ("# qualquer coisa"). outerWidth ()

Este código obterá a posição certa em relação ao lado esquerdo. Se a intenção era obter a posição lateral certa em relação à direita (como ao usar a rightpropriedade CSS ), uma adição ao código é necessária da seguinte maneira:

$ ("# parent_container"). innerWidth () - ($ ("# qualquer coisa"). offset (). left + $ ("# qualquer coisa"). outerWidth ())

Este código é útil em animações onde você deve definir o lado direito como uma âncora fixa quando você não pode definir inicialmente a rightpropriedade em CSS.

— cdZ
fonte

6

Na verdade, eles só funcionam quando a janela não é rolada da posição superior esquerda.
Você tem que subtrair os valores de rolagem da janela para obter um deslocamento que seja útil para reposicionar os elementos para que permaneçam na página:

var offset = $('#whatever').offset();

offset.right = ($(window).width() + $(window).scrollLeft()) - (offset.left + $('#whatever').outerWidth(true));
offset.bottom = ($(window).height() + $(window).scrollTop()) - (offset.top + $('#whatever').outerHeight(true));

— Jrosen
fonte

5

Existe uma API DOM nativa que consegue isso imediatamente - getBoundingClientRect:

document.querySelector("#whatever").getBoundingClientRect().right

— Barney
fonte

2

Mas getBoundingClientRect retorna em relação à janela de visualização e não em relação ao documento, que é o que offset () fornece.

— Sai Dubbaka,

4

Brendon Crawford teve a melhor resposta aqui (em comentário), então vou movê-la para uma resposta até que ele o faça (e talvez expandir um pouco).

var offset = $('#whatever').offset();

offset.right = $(window).width() - (offset.left + $('#whatever').outerWidth(true));
offset.bottom = $(window).height() - (offset.top + $('#whatever').outerHeight(true));

— Gary
fonte

2

Obtendo o ponto de ancoragem de um div/table (left) = $("#whatever").offset().left;- ok!

Obtendo o ponto de ancoragem de um div/table (right)você pode usar o código abaixo.

 $("#whatever").width();

— hyp3r byt3
fonte

como obter o deslocamento correto de um elemento? - jQuery