jQuery offset top no funciona correctamente

Estoy tratando de crear un script dibujar algo en un elemento con el mouse y estoy usando Raphaeljs para hacer eso. Para obtener un dibujo correcto, necesito encontrar top y left del elemento input‍‍. Estoy usando var offset = $("#input").offset(); para obtener left y top.jQuery offset top no funciona correctamente

Pero el valor de top no es correcto. Es 10px menor que la distancia real top. Creo que el 10px puede cambiar en diferentes resoluciones, entonces no puedo agregar 10px normalmente ¡Quiero saber cómo puedo solucionar el problema!

He subido mi prueba here.

Fuente

2012-08-23 ahmadali shafiee

¿Ha comprobado los márgenes o el relleno de cualquier elemento que lo contenga? – Archer

@Archer sí. ¡Tengo y no había 'margen' o' relleno'! –

El .offset() función jQuery tiene this limitation:

Nota: jQuery no soporta conseguir las coordenadas de desplazamiento de los elementos ocultos y contabilidad de las fronteras, márgenes o parches fijados en el elemento del cuerpo.

El cuerpo en este caso tiene un borde superior de 10px, por lo que su dibujo está desactivado en 10 píxeles.

Solución recomendada:

var offset = $("#input").offset(); 
x = x - offset.left - $(document.body).css("border-left"); 
y = y - offset.top + $(document.body).css("border-top");

Fuente

2012-08-23 18:18:05

¡Muchas gracias por esa nota! – user805981

Al igual que una adición al uso de la propiedad offset(): Obtuve lo que parecían ser resultados erróneos de ella (estaba tratando de usar la compensación para encontrar la distancia de una lista de navegación desde la parte superior de la ventana gráfica, para poder use ese valor como la configuración de 'compensación superior' en el complemento 'affix' de bootstrap). Lo que descubrí fue que la compensación estaba calculando mal la distancia a menos que todos los elementos HTML * anteriores * al elemento de la lista en cuestión (es decir, los que determinaban su lugar en la página) tuvieran alturas explícitamente declaradas. Dándoles alturas específicas en css lo resolvió. –

Tengo dos soluciones diferentes:

1) se puede calcular por encima de la altura total del elemento con outerHeight(true) método. Este método calculará la altura con márgenes, almohadillas y bordes.

Y esto no creará el conflicto, devolverá el valor verdadero. Here is jsFiddle example.

html

<div class="header"></div> 
<div class="nav"></div> 
<div class="myEle"></div>

jQuery

var myEleTop = $('.header').outerHeight(true) + $('.nav').outerHeight(true);

2) Si ha definido top CSS para el elemento que está postioned con relación al cuerpo, puede utilizar este valor demasiado:

parseInt($('#myEle').css('top'));

Fuente

2012-08-23 08:44:46

¡Lo intenté! simplemente devuelve una excepción que dice 'top' ¡no existe! –

Probé '$ (" # input "). Css (" top ")' el resultado es [aquí] (http://jsfiddle.net/3ZVHx/) –

Agregué una segunda forma, larga pero mucho más sólida –

Después de luchar con esto por un tiempo y revisar varias respuestas posibles que han llegado a la conclusión de que jQuery compensado() superior (y presumiblemente DOM API que se utiliza) es demasiado poco fiable. para uso general. No solo está documentado como excluyendo los márgenes de nivel html, sino que también arroja resultados inesperados en muchos otros casos.

posición(). Arriba funciona, pero puede no ser práctico/posible diseñar la página para que sea equivalente.

Afortunadamente he encontrado que element.getBoundingClientRect().arriba obtiene la posición relativa a la ventana gráfica perfectamente. A continuación, puede agregar $ (document) .scrollTop() para obtener la posición desde la parte superior del documento si es necesario.

Fuente

2018-01-29 15:51:11

jQuery offset top no funciona correctamente

Respuesta

Cuestiones relacionadas