vue ，超出div内容区域，滑动展示

<template>
  <transition name="el-fade-in">
    <div class="slide">
      <div :class="['btn', show ? 'btn1' : '']" @click="showMenu">》</div>
      <div class="menus" v-if="show">
        <div class="menu-up" @click="showMore('down')">
          <i class="el-icon-caret-top"></i>
        </div>
        <div class="container">
          <div ref="menuContainer" class="menuContainer">
            <div class="menu" v-for="(v, i) in list" :key="i">
              <i :class="v.icon"></i>
              <span>{{v.text}}</span>
            </div>
          </div>
        </div>
        <div class="menu-down" @click="showMore('up')">
          <i class="el-icon-caret-bottom"></i>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  data () {
    return {
      show: true,
      active: 0,
      el: null,
      list: [
        {
          icon: 'el-icon-platform-eleme',
          text: '遥感监测'
        },
        {
          icon: 'el-icon-user-solid',
          text: '非道路移动机械'
        },
        {
          icon: 'el-icon-star-on',
          text: '重型柴油车改造治理'
        },
        {
          icon: 'el-icon-question',
          text: '油气回收'
        },
        {
          icon: 'el-icon-zoom-in',
          text: 'M站'
        },
        {
          icon: 'el-icon-s-help',
          text: 'OBD'
        },
        {
          icon: 'el-icon-picture',
          text: '大宗物料运输企业管控门禁系统'
        },
        {
          icon: 'el-icon-camera-solid',
          text: '机动车排放检验机构'
        },
        {
          icon: 'el-icon-s-cooperation',
          text: '路检路查、停放地抽测'
        }
      ]
    }
  },
  methods: {
    showMenu() {
      this.show = !this.show;
    },
    showMore(v) {
      let el = this.$refs.menuContainer;
      let percent = 1 / this.list.length * 100
      if(v == 'up') {
        this.active ++ ;
        if(this.active > 0) this.active = 1;
      } else {
        this.active -- ;
        if(this.active < 0) this.active = 0;
      }
      el.style.transform = "translateY(-" + this.active * percent + "%)"
    }
  }
}
</script>

<style scoped lang="less">
.slide{
  min-height: 960px;
  position: absolute;
  right: 0;
  // top: 50%;
  // transform: translateY(-50%);
  top: 68px;
}
.btn{
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: width linear .2s;
  z-index: 10;
  width: 16px;
  height: 66px;
  background: #C1C1C1;
  line-height: 66px;
  background-size: 100% 100%;
  cursor: pointer;
  &.btn1{
    right: 110px;
  }
}
.menus{
  height: 960px;
  overflow: hidden;
  .menu-up{
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 30px;
    &:hover {
      cursor: pointer;
    }
  }
  .menu-down{
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 30px;
    &:hover {
      cursor: pointer;
    }
  }
  .container {
    height: 800px;
    overflow: hidden;
    border-top: 1px solid #00f; 
    border-bottom: 1px solid #00f; 
  }
  .menuContainer{
    transition: all .5s linear;
  }
  .menu{
    width: 100px;
    height: 100px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 12px;
    border-bottom: 1px solid #00f; 
    border-left: 1px solid #00f; 
    padding: 0 5px;
    i {
      font-size: 30px;
    }
    span {
      text-align: center;
      margin-top: 6px;
    }
  }
}
</style>