Div se mueve con el mouse
Si vincula el evento al cuadro, la respuesta del evento solo se puede completar cuando el mouse se mueve hacia abajo hacia la derecha, pero si desea moverse hacia arriba y hacia la izquierda, no puede vincular el evento a la caja, sino al medio.
En este momento, debido a que se usa clientX, se usa para obtener las coordenadas del mouse en la ventana actualmente visible. El desplazamiento del div es relativo a toda la página. Por lo tanto, aumentar la altura o el ancho del texto en este momento separará el mouse del div, porque las posiciones (0, 0) del cliente y el div son diferentes cuando se desplaza por la página.
En este momento, la distancia entre el mouse y el div = la distancia de desplazamiento de la ventana;
PageX y pageY pueden obtener las coordenadas del mouse relativas a la página actual.
Sin embargo, estas dos propiedades no son compatibles con IE8, por lo que si necesita compatibilidad con IE8, no las utilice.
Para compatibilidad con el navegador, debe modificar el desplazamiento del div y agregar la distancia de desplazamiento de la ventana al desplazamiento del div.
Chrome piensa que la barra de desplazamiento del navegador es el cuerpo, que se puede obtener a través de body.scrollTop. Los navegadores como Firefox piensan que la barra de desplazamiento del navegador es html. Del mismo modo, para que sea compatible con diferentes navegadores,
El código fuente completo es: