div内容超出自动滚动

情况一：
1.要求：div内容超出自动滚动，鼠标进入停止滚动
2.效果：
3.代码（vue）

<template>
  <div class='container'>
      <div ref="contentRef" class="content">
          <div v-for="item in 20" :key="item" class="contentItem">{{item}}</div>
      </div>
  </div>
</template>

<script lang='ts'>
import Vue from 'vue'
export default Vue.extend({
  data () {
    return {
      timer: undefined
    }
  },
  mounted () {
    this.initDiv()
  },
  methods: {
    initDiv () {
      const self = this
      const setInter = function () {
        if (self.$refs.contentRef.scrollTop === self.$refs.contentRef.scrollHeight - self.$refs.contentRef.clientHeight) {
          self.$refs.contentRef.scrollTop = 0
        } else {
          self.$refs.contentRef.scrollTop++
        }
      }
      self.timer && clearInterval(self.timer)
      self.timer = setInterval(setInter, 100)

      this.$refs.contentRef.addEventListener('mouseover', function () {
        self.timer && clearInterval(self.timer)
      })
      this.$refs.contentRef.addEventListener('mouseout', function () {
        self.timer = setInterval(setInter, 100)
      })
    }
  }
})
</script>

<style scoped lang='scss'>
    .content{
        margin-top:100px;
        height: 300px;
        width:300px;
         border:1px solid #f0f0f0;
         overflow: scroll;
        .contentItem{
            margin:10px 0;
            background-color: #f0f0f0;
            line-height:50px;
            text-align: center;
            cursor: pointer;
        }
    }
</style>

情况二:
1.要求：只要求div内容超出自动滚动
2.效果图：

3.代码

<template>
  <div class='container'>
      <div class="divScroll">
        <div ref="contentRef" class="content">
          <div v-for="item in 10" :key="item" class="contentItem">{{item}}</div>
        </div>
      </div>

  </div>
</template>

<script lang='ts'>
import Vue from 'vue'
export default Vue.extend({
  data () {
    return {
    }
  },
  methods: {
  }
})
</script>

<style scoped lang='scss'>
    .divScroll{
        margin-top:100px;
        height: 300px;
        overflow: scroll;
    }
    .content{
        width:300px;
        border:1px solid #f0f0f0;
        animation: divScroll 4s linear infinite;
        .contentItem{
            margin:10px 0;
            background-color: #f0f0f0;
            line-height:50px;
            text-align: center;
        }
    }
    @keyframes divScroll {
        0%{
            transform:translateY(0px)
        }
        100%{
            transform: translateY(calc(-100% + 300px));
        }
    }
</style>