Uso v-for para representar la lista de mensajes. cuando se procesa el primer lote de mensajes, uso scrollIntoView() en el más nuevo para que el contenedor se desplace hacia abajo. a medida que el usuario se desplaza hacia arriba, busco mensajes anteriores para crear un desplazamiento continuo. el problema es que cuando se procesan nuevos mensajes, el desplazamiento va a la parte superior del contenedor.

Intenté guardar la identificación del primer mensaje en la lista antes de actualizar la lista con los mensajes obtenidos y luego volver a desplazarme a ese mensaje, pero provoca un salto en la pantalla por un momento y no es una buena experiencia para el usuario.

¿Cómo puedo anteponer y representar mensajes más antiguos en la lista de mensajes para que los mensajes actuales permanezcan en su lugar dondequiera que estén en la pantalla?

la lista de mensajes se almacena en vuex y la actualizo usando esta acción:

 HandleMessageList({state, commit}, msgList) { const currentMessages = state.messages const updatedMessages = msgList.concat(currentMessages) commit('SET_MESSAGES', updatedMessages) }

y en plantilla:

 <template> <div class=msg-container" ref="messageDisplayArea"> <message-object v-for="msg in msgList" :key="msg.id" /> </div> </template> <script> import {mapState} from "vuex"; export default { name: "MessageDisplay", components: { MessageObject, }, computed: { ...mapState({ msgList: state => state.messages, }), }, updated() { this.$nextTick(() => this.scrollToTarget()) }, mounted() { this.$refs.messageDisplayArea.addEventListener('scroll', this.handleUserScroll) }, beforeDestroy() { this.$refs.messageDisplayArea.removeEventListener('scroll', this.handleUserScroll) }, methods: { scrollToTarget() { // ... scroll back to the position before message list update }, handleUserScroll(e) { const scrollTop = e.target.scrollTop const scrollHeight = e.target.scrollHeight const elementHeight = e.target.offsetHeight if (scrollTop === 0 && elementHeight < scrollHeight) { // ... fetch older messages } }, }, } </script>

versiones:

 vue 2.6.10 vuex 3.0.1