2010-06-15 17 views
68

Esta es probablemente una pregunta realmente simple, pero ¿cómo hago para obtener el desplazamiento correcto de un elemento en jQuery?cómo obtener la compensación correcta de un elemento? - jQuery

que puedo hacer:

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

y es válida.

pero parece que:

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

no está definido.

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

Gracias!

Respuesta

127

Alex, Gary:

a lo solicitado, aquí está mi comentario publicado como respuesta:

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

Gracias por avisarme.

+0

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

+2

Este es el desplazamiento desde el lado derecho de la ventana. Para el desplazamiento desde el lado izquierdo de la ventana, vea cdZ's [answer] (http://stackoverflow.com/a/5643921/675721). –

+0

el extremo derecho de un elemento se puede encontrar más "nativamente" '$ whatever [0] .getBoundingClientRect(). Right'. esto es relativo al borde izquierdo de la ventana. – pstanton

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

Referencia: .outerWidth()

+1

creo necesario agregar ellos y luego menos 1. si el ancho es 2, entonces queda es a las 10 , y el derecho no está en 12 sino 11. –

+30

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/principal", y "derecha" implica "el desplazamiento del punto más a la derecha del elemento desde el lado derecho de la ventana/padre ". Entonces, la respuesta correcta sería: 'var rt = ($ (ventana) .width() - ($ whatever.offset(). Left + $ whatever.outerWidth()));' –

+0

Cómo la gente no se dio cuenta de eso esta es la respuesta incorrecta: 0 –

14

tal vez soy malentendido su pregunta, pero el desplazamiento se supone que le dará dos variables: una horizontal y una vertical. Esto define la posición del elemento. Así que lo que estás buscando es:

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

y

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

Si necesita saber dónde está el límite derecho del elemento es, entonces debería usar:

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

Es un truco para acertar de un elemento. Gracias Greg! – n2lose

7

Solo una adición a lo que dijo Greg:

$ ("# whatever"). Offset(). Left + $ ("# lo que sea "). outerWidth()

Este código tendrá la posición correcta en relación con el lado izquierdo. Si la intención era conseguir la posición lateral derecha en relación con el derecho (como cuando se utiliza la propiedad CSS right) y luego una adición al código es necesaria la siguiente manera:.

$ ("# parent_container") innerWidth () -. ($ ("# lo que sea") de desplazamiento() izquierda + $ ("# lo que sea") outerWidth())

Este código es útil en animaciones donde se tiene que fijar el lado derecho como.. un anclaje fijo cuando inicialmente no se puede establecer la propiedad right en CSS.

3

Brendon Crawford tuvo la mejor respuesta aquí (en comentario), así que la moveré a una respuesta hasta que lo haga (y tal vez 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)); 
3

En realidad, estos solo funcionan cuando la ventana no se desplaza en absoluto desde la posición superior izquierda.
Hay que restar los valores de desplazamiento de la ventana para obtener un desplazamiento que es útil para elementos de reposicionamiento para que se mantengan 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)); 
1

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

Obteniendo el punto de anclaje de div/table (right) puede usar el siguiente código.

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

Hay una API DOM nativo que logra esto fuera de la caja - getBoundingClientRect:

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

Pero getBoundingClientRect devuelve relativo a la ventana gráfica no relativo al documento, que es lo que proporciona offset(). –

Cuestiones relacionadas