Estoy creando un sitio web similar a una sala de chat usando vue.
Uso display: flex & column-reverse en css para revertir la vista de mensajes.
Y use Array unshift para insertar un nuevo mensaje.
En Chrome y Firefox, esto siempre mantendrá a la vista el mensaje más reciente (en la parte inferior).
Pero los safaris no.
Probé el método "scrollTo" después de agregar un nuevo mensaje, pero parece que no funciona sin la interacción del usuario.
(Se puede agregar un nuevo mensaje sin que ningún usuario interactúe poco tiempo antes)
También intenté detectar si estaba en la parte inferior o no usando "scrollTop" (entonces puedo notar que el usuario recibió un nuevo mensaje), pero también fallé en Safari.
¿Alguna otra forma de hacer que Safari funcione igual que Chrome/Firefox?
Una demostración aquí, puede abrir con safari con el problema.
<!-- Use preprocessors via the lang attribute! eg <template lang="pug"> --> <template> <div id="app" ref="app"> <p v-for="message in messages" > {{ message }} </p> </div> </template> <script> export default { data() { return { messages: [] }; }, mounted() { setInterval(() => { this.messages.unshift((new Date()).toString()) this.$nextTick(() => { this.$refs.app.scrollTo(0, 0) }) }, 1000) } }; </script> <!-- Use preprocessors via the lang attribute! eg <style lang="scss"> --> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; text-align: center; color: #2c3e50; display: flex; flex-direction: column-reverse; overflow-y: scroll; scroll-behavior: smooth; height: 90vh; } a, button { color: #4fc08d; } button { background: none; border: solid 1px; border-radius: 2em; font: inherit; padding: 0.75em 2em; } </style>Cambiar su overflow de scroll a visible debería resolver este problema.
#app { overflow: visible; } La razón por la que no se desplaza es que su contenedor #app no recoge la altura del contenido modificada dentro del cuadro de la aplicación.