Bueno entonces tengo esto:
x = `${e.clientX+window.scrollX}px` y = `${e.clientY+window.scrollY}px` Y funciona, pero el problema es que el elemento puede extenderse fuera de la página y crea una barra de desplazamiento.
Entonces, ¿cómo puedo hacer que posicione el div de alguna manera que no haga eso? ¿Es posible?
Traté de resolver esto a través de JS. Aquí está mi código:
var pointerX = -1; var pointerY = -1; document.onmousemove = function(event) { pointerX = event.pageX; pointerY = event.pageY; } setInterval(pointerCheck, 1000); function pointerCheck() { console.log('Cursor at: '+pointerX+', '+pointerY); }Puede tener en cuenta el ancho/alto de la ventana gráfica y el ancho/alto del elemento para calcular las coordenadas x/y de su elemento. Vea el pseudocódigo adjunto para hacerse una idea. Podría necesitar un ajuste aquí y allá :)
const { clientHeight, clientWidth } = document.documentElement const { offsetHeight, offsetWidth } = element const { clientY, clientX } = event const { scrollY, scrollX } = window let x = clientX + scrollX // check if the box would leave the viewport on the right side if (x + offsetWidth > clientWidth) { // move the element to the left x -= clientWidth - (x + offsetWidth) } let y = clientY + scrollY // check if the box would leave the viewport on the bottom if (y + offsetHeight > clientHeight) { // move the element to the top y -= clientHeight - (y + offsetHeight) }