用Vue保持滚动的滚动

Question

我正在使用VUE制作一个类似聊天室的网站。

我使用显示：Flex＆amp; CSS上的列逆转到反向消息查看。
并使用Array Unshift插入新消息。

在Chrome＆amp; Firefox，这将始终保持最新消息（底部）。
但是野生动物园不会。

在附加新消息后，我尝试了方法“ scrollto”，但是如果没有用户交互，它似乎无法正常工作。
（在很短的时间之前，可能没有任何用户交互的新消息可以附加）

我还尝试检测底部是否使用“ scrolltop”（然后我会注意到用户一条新消息会出现），但在Safari上也失败了。

有其他方法使Safari的工作与Chrome/Firefox一样吗？

这里的演示可以与Safari一起开放。

codepen

<!-- Use preprocessors via the lang attribute! e.g. <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! e.g. <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>

Answer 1

将您的溢出从滚动更改为可见应该解决此问题。

#app {
  overflow: visible;
}

它不滚动的原因是您的#App容器不会在应用程序框中更改的内容高度，