naive-ui/demo/documentation/components/log/enUS/scroll.demo.md

Scroll

You can easily make log scroll to top or bottom. Also you can make the scroll action silent (don't trigger events of Log in this scroll action).

<n-button-group>
  <n-button @click="scrollTo({ position: 'bottom', slient: false })">Scroll To Bottom</n-button>
  <n-button @click="scrollTo({ position: 'bottom', slient: true })">Scroll To Bottom (silent)</n-button>
  <n-button @click="scrollTo({ position: 'top', slient: false })">Scroll To Top</n-button>
  <n-button @click="scrollTo({ position: 'top', slient: true })">Scroll To Top (silent)</n-button>
</n-button-group>
<n-log
  ref="log"
  :log="log"
  @require-more="handleRequireMore"
  @reach-top="handleReachTop"
  @reach-bottom="handleReachBottom"
  :loading="loading"
  trim
/>

function log () {
  const l = []
  for (let i = 0; i < 10; ++i) {
    l.push(Math.random().toString(16))
  }
  return l.join('\n') + '\n'
}

export default {
  inject: ['message'],
  data () {
    return {
      loading: false,
      log: log()
    }
  },
  methods: {
    clear () {
      this.log = ''
    },
    handleRequireMore (from) {
      this.message.info('Require More from ' + from)
      if (this.loading) return
      this.loading = true
      setTimeout(() => {
        if (from === 'top') {
          this.log = log() + this.log
        } else if (from === 'bottom') {
          this.log = this.log + log()
        }
        this.loading = false
      }, 1000)
    },
    handleReachTop () {
      this.message.info('Reach Top')
    },
    handleReachBottom () {
      this.message.info('Reach Bottom')
    },
    scrollTo(...args) {
      this.$refs.log.scrollTo(...args)
    }
  }
}

.n-button-group { 
  margin-bottom: 12px;
}