[VUE + TYPESCRIPT] 메세지 추가 애니메이션

VUE.JS 목록

 

<template>
  <div>
    <div class="scroll-box">
      <section :id="message" v-for="(message, key) in messages" :key="key">{{message}}. 메세지</section>
    </div>
    <a href="#el1">1</a> |
    <a href="#el2">2</a> |
    <a href="#el3">3</a> |
    <a href="javascript:;" @click="top">top</a> |
    <a href="javascript:;" @click="bottom">bottom</a> |
    <a href="javascript:;" @click="addMessage">추가</a> |
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class TestScrollView extends Vue {
  messages = ['el1', 'el2', 'el3']
  lastIndex = 3

  top () {
    const scrolls = this.$el.querySelector('#el1')
    if (scrolls) {
      scrolls.scrollIntoView(false)
    }
  }

  bottom () {
    const scrolls = this.$el.querySelector('#el' + this.lastIndex)
    if (scrolls) {
      scrolls.scrollIntoView({ behavior: 'smooth' })
    }
  }

  addMessage () {
    this.lastIndex++
    this.messages.push('el' + this.lastIndex)
    this.$nextTick(() => {
      this.bottom()
    })
  }
}
</script>

<style scoped>
.scroll-box {
  scroll-behavior: smooth;
  padding: 15px;
  background-color: #eaeaea;
  display: block;
  width: 200px;
  height: 120px;
  overflow-y: scroll;
  text-align: center;
}
section {
  margin: 20px;
  height: 100px
}
</style>

 

 

VUE.JS 목록