¿Cómo obtener el desplazamiento correcto de un elemento?

86

Esta es probablemente una pregunta realmente simple, pero ¿cómo puedo obtener el desplazamiento correcto de un elemento en jQuery?

Puedo hacer:

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

y es válido.

Pero parece que:

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

es indefinido.

Entonces, ¿cómo se logra esto en jQuery?

¡¡Gracias!!

jquery offset

— Alex
fuente

161

Alex, Gary:

Según lo solicitado, aquí está mi comentario publicado como respuesta:

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

Gracias por hacérmelo saber.

En pseudocódigo que se puede expresar como:

El desplazamiento correcto es:

El ancho de la ventana MENOS
(el desplazamiento a la izquierda del elemento MÁS el ancho exterior del elemento )

— Brendon Crawford
fuente

esto no funciona con las transformaciones CSS, el desplazamiento se verá afectado por la transformación, pero el ancho exterior (y el ancho) no.

— Jonathan.

2

Este es el desplazamiento desde el lado derecho de la ventana. Para el desplazamiento desde el lado izquierdo de la ventana, vea la respuesta de cdZ .

— Codificación

el borde más a la derecha de un elemento se puede encontrar de forma más "nativa" $whatever[0].getBoundingClientRect().right. esto es relativo al borde izquierdo de la ventana.

— pstanton

Gracias brendon. Respuesta útil.

29

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

Referencia: .outerWidth ()

— jAndy
fuente

1

Creo que necesito agregarlos y luego menos 1. Si el ancho es 2, entonces la izquierda está en 10, y la derecha no está en 12 sino en 11.

— polaridad

31

Esta es una respuesta incorrecta. En CSS, "izquierda" implica "el desplazamiento del punto más a la izquierda del elemento desde la izquierda de la ventana / padre", y "derecha" implica "el desplazamiento del punto más a la derecha del elemento desde la derecha de la ventana / padre" ". Entonces, la respuesta correcta sería:var rt = ($(window).width() - ($whatever.offset().left + $whatever.outerWidth()));

— Brendon Crawford

5

@BrendonCrawford Deberías mover ese comentario a una respuesta.

— Gary

3

Una nota para todos los que vengan: la respuesta anterior se ha editado para reflejar correctamente el comentario hecho por Brendon.

— Chris Marasti-Georg

16

Tal vez no haya entendido bien su pregunta, pero se supone que el desplazamiento le da dos variables: una horizontal y una vertical. Esto define la posición del elemento. Entonces, lo que estás buscando es:

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

y

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

Si necesita saber dónde está el límite correcto de su elemento, entonces debe usar:

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

— Greg
fuente

9

Solo una adición a lo que dijo Greg:

$ ("# lo que sea"). offset (). left + $ ("# lo que sea"). outerWidth ()

Este código obtendrá la posición correcta en relación con el lado izquierdo. Si la intención era obtener la posición del lado derecho en relación con el derecho (como cuando se usa la rightpropiedad CSS ), entonces es necesaria una adición al código de la siguiente manera:

$ ("# parent_container"). innerWidth () - ($ ("# lo que sea"). offset (). left + $ ("# lo que sea"). outerWidth ())

Este código es útil en animaciones en las que debe establecer el lado derecho como un ancla fija cuando inicialmente no puede establecer la rightpropiedad en CSS.

— cdZ
fuente

6

En realidad, estos solo funcionan cuando la ventana no se desplaza en absoluto desde la posición superior izquierda.
Debe restar los valores de desplazamiento de la ventana para obtener un desplazamiento que sea útil para reposicionar elementos para que permanezcan en la 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
fuente

5

Hay una API DOM nativa que logra esto de inmediato getBoundingClientRect:

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

— Barney
fuente

2

Pero getBoundingClientRect devuelve en relación con la ventana gráfica, no en relación con el documento, que es lo que proporciona offset ().

— Sai Dubbaka

4

Brendon Crawford tuvo la mejor respuesta aquí (en el comentario), así que lo moveré a una respuesta hasta que lo haga (y tal vez lo amplíe un poco).

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

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

— Gary
fuente

2

Conseguir el punto de anclaje de div/table (left) = $("#whatever").offset().left;... ¡ok!

Para obtener el punto de anclaje de un div/table (right), puede usar el siguiente código.

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

— hyp3r byt3
fuente

¿Cómo obtener el desplazamiento correcto de un elemento? - jQuery