Estoy desarrollando una aplicación que funciona con archivos .pdf y está diseñada para usarse en dispositivos móviles. Necesito averiguar la altura y el ancho de un elemento que se desborda de la pantalla a medida que se desplaza el pdf para trabajar con coordenadas.
Ahora la pregunta. ¿Cómo puedo averiguar el ancho y la altura del área que se está sobrevolando en cualquier lado de la pantalla (puede ocurrir en ambos lados)?
pon esto en tu archivo css.
background: #000 !important; color: #0f0 !important; outline: solid #f00 1px !important; }delineará todo el elemento en su código.
Si entiendo correctamente, entonces podría obtener el ancho del elemento y luego comparar 100vw - theWidthOfElement.
Si desea trabajar con coordenadas, simplemente desplace la ventana hacia la izquierda para obtener la coordenada x.
element.getBoundingClientRect() devuelve un objeto con propiedades que incluyen .width y .height .
Estos son el ancho y el alto de un elemento, y continúan fuera de la pantalla (por lo que, en su caso, serán más grandes que las dimensiones de la ventana gráfica).
https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
También puede encontrar útiles las .left , .right , .top y .bottom de .getBoundingClientRect() . Estos, nuevamente, se extienden más allá de la pantalla, devolviendo valores negativos para la izquierda y la parte superior, y números más grandes que la ventana gráfica para la derecha y la parte inferior.
A menudo, el elemento (su pdf o su contenedor) se define mediante un evento de clic, pero los dispositivos móviles dependen de touchEvent s (y los errores al aplicarlos parecen interferir con .getBoundingClientRect() , así que tenga cuidado. (consulte: getBoundingClientRect está vacío en el móvil ).
Podría hacer un fragmento de demostración aquí, pero no estoy en un dispositivo móvil para probar y podría confundir a los usuarios de otros dispositivos. La página de MDN en .getBoundingClientRect() debería ayudarte.