6

Imagine que eu tenha uma popup que é centralizada com transform:translateX(-50%) translateY(-50%) (se você tiver dúvida sobre essa solução, pode ver mais sobre ela aqui, adaptada destas respostas).

Até ai tudo bem, o elemento é centralizado corretamente, mas digamos que por algum motivo eu precise descobrir a posição exata dele no document do navegador (para implementar um drag'n-drop por exemplo). Eu tentei as propriedades offsetTop e offsetLeft mas elas retornam a posição do elemento sem os transforms, ou seja, é uma posição "fake".

Minha pergunta é, existe alguma propriedade que retorne os valores reais de um elemento que seja posicionado usando translate?

Segue um exemplo para melhor entendimento: FIDDLE.

2 Respostas 2

7

Como foi comentado, as propriedades offsetTop e offsetLeft não retornam a posição exata do elemento quando ele usa a propriedade CSS translate().

A única propriedade que eu tenho conhecimento que funcione com translate() é a getBoundingClientRect(), e o mais interessante: Ela é antiga e totalmente cross-browser (funciona até no IE6).

Segue um exemplo de implementação:

var el = document.getElementById('popup'),
    pos = el.getBoundingClientRect();

alert('Top: '+pos.top+'\nLeft: '+pos.left); // retorna a posição REAL do elemento

E um exemplo: FIDDLE

-1

Quando você usa o translate, a posição do elemento fica centralizada.

Desse forma você precisa pegar o width do elemento e dividir por dois, assim você tem a posição left;

Para pegar o top, basta pegar o height do elemento e dividir por dois.

2
  • Favor, o código na resposta. Da forma que está não é considerado uma resposta muito válida. 22/06/2017 às 20:12
  • Bem vindo ao Stack Overflow, Rafael! Sugiro que você explique melhor sua solução (um exemplo funcionando seria ótimo!) e que você não compartilhe dados de contato em respostas - ah, e que faça o tour para conhecer melhor o SOpt! :)
    – Daniel
    22/06/2017 às 23:02

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .