es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • ¿Cómo utilizar Nuxt o Vuetify para desplazarse hasta el final de un div con scroll al cambiar una variable observada?

¿Cómo utilizar Nuxt o Vuetify para desplazarse hasta el final de un div con scroll al cambiar una variable observada?

12 Jul, 2023 Programación

He estado jugando con esto por un tiempo y no puedo encontrar una forma de hacer que este contenedor con desplazamiento se mueva hacia la parte inferior cada vez que hay un nuevo mensaje. La mayoría de las sugerencias son establecer scrollTop en la scrollHeight del elemento hijo, pero esa propiedad no parece ser modificable al establecerla con =.

Fragmento de código:

<template>
  <ul ref="messages">
    <li v-for="msg in ROUND_MESSAGES" :key="msg.text">
      {{ msg.text }}
    </li>
  </ul>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters('sessionStorage', ['ROUND_MESSAGES']),
  },

  watch: {
    ROUND_MESSAGES() {
      console.log(this.$refs.messages.scrollTop); // retorna 0
      this.$refs.messages.scrollTop += 50;
      console.log(this.$refs.messages.scrollTop); // retorna 0
    },
  },
}
</script>

Padre que contiene estos componentes:

<v-row class="content-panel messages-container text-left">
  <v-col class="my-0 py-0 pl-0">
    <messageswindow></messageswindow>
  </v-col>
</v-row>

Estilo:

.messages-container {
    overflow: auto;
    flex-grow: 1;
    width: 642px;
    height: 80px;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}
Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para que el contenedor deslizable se mueva hacia abajo cada vez que hay un nuevo mensaje, puedes utilizar la propiedad scrollTop del ref al contenedor. Sin embargo, es importante tener en cuenta que la propiedad scrollTop no cambia inmediatamente después de establecerla con =. Una forma de resolver esto es envolver la configuración de scrollTop en un método this.$nextTick(), que ejecuta el código en el siguiente ciclo de actualización del DOM. Así es cómo puedes modificar el fragmento de código:

    <template>
  <ul ref="messages">
    <li v-for="msg in ROUND_MESSAGES" :key="msg.text">
      {{ msg.text }}
    </li>
  </ul>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters('sessionStorage', ['ROUND_MESSAGES']),
  },

  watch: {
    ROUND_MESSAGES() {
      this.$nextTick(() => {
        this.$refs.messages.scrollTop = this.$refs.messages.scrollHeight;
      });
    },
  },
}  
</script>

    Este código establecerá la propiedad scrollTop del ref en la propiedad scrollHeight del mismo ref, lo cual hará que el contenedor se mueva hacia la parte inferior del contenido. El uso de $nextTick() asegura que la propiedad scrollTop se establezca después de que se haya actualizado el DOM.

Comments are closed.