Básicamente, estoy chateando en vuejs + socket.io y quiero que cada vez que se envíe o reciba un mensaje, o cuando ingrese al sitio, llegue directamente al final de la página, donde se encuentra el último mensaje. es
Hice una función que se activa en el gancho onMounted, cuando recupero los datos, y en el socket.on('message') :
const scrollToLatest = () => { let container = document.getElementById("messages") console.log("scrolltop",container.scrollTop) console.log("scrollheight",container.scrollHeight) container.scrollTop = container.scrollHeight; console.log("scrolltop after", container.scrollTop) }Esto es lo que devuelve el archivo console.log:
(si no puedes cargar la imagen :)
scrolltop 0 scrollheight 5594 scrolltop after 0 He intentado usar window.scrollTo(0, container.scrollHeight) pero tampoco funciona
Espero que alguien pueda ayudarme, he buscado mucho sobre este tema, pero no pude hacerlo funcionar correctamente.
pase una clase personalizada a su div en su <template> primero:
<div :class="`messages`"> </div> y luego obtenga la posición del div como un número:
getPositionOfElement() { return (document.getElementsByClassName("messages").getBoundingClientRect().top - window.innerHeight); } Este sería el método para desplazarse a la posición donde se encuentra su div ; adáptelo a sus necesidades como se describe en la documentación oficial :
smoothScroll(vertPos) { window.scrollTo({ top: vertPos, left: 0, behavior: 'smooth' }); }combine ambos métodos de esta manera desde el lugar donde necesita realizar el desplazamiento, llamándolo desde otro método o directamente desde la plantilla ...
this.smoothScroll(this.getPositionOfElement());Por favor, avíseme si esto funciona para usted.