上下手动轮播滚动条

html部分

 <!--年份-->
        <div class="containers">
          <div class="putures">
            <ul class="contents" v-for="(item,index) in arr" :class="{coor:item.active==active_ins}" @click="routerLinks_One(index,item.active)">
              <li>{{item.year}}</li>
            </ul>

          </div>
          <div class="span2">
            <span class="left1"><img src="../assets/buttom1.png" alt=""></span>

            <span class="right1"><img src="../assets/top2.png" alt=""></span>
          </div>
        </div></div>

js部分

 methods:{
      inOnes(){
        //  上下滚动事件
        var left1=document.querySelector(".left1");
        var right1=document.querySelector(".right1");
        var img=document.querySelector(".contents");
        var num=0;
        var that=this
        left1.onclick=function(){
          console.log(that.arr.length)
          // console.log(this.arr)
          num= num - 40;
          img.style.marginTop=num+"px";
          if(num <= - (that.arr.length-4)*40){
            num=-(that.arr.length-4)*40
          } img.style.marginTop=num + "px"
        }
        right1.onclick=function(){
          num=num+40;
          if(num>=0){
            num=0
          }
          img.style.marginTop=num+"px";

        }
      },
      }，
      mounted(){
        this.inOnes()
      },

css

.coor{
    color: #000!important;
  }
  .span2{
    margin: 0 auto;
    cursor: pointer;
  }
  .left1{
    position: relative;
    bottom:-0px;

  }
  .right1{
    position: relative;
    top: -210px;
  }
  ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
  }
  .contents li{
    height: 40px;
    line-height: 40px;
  }
  .contents{
    font-size: 13px;
    position: relative;
    transition: all 1s;
    color: rgb(148,184,221);
    list-style: none;

  }
  .putures{
    overflow: hidden;
    height: 150px;
    background-color: #fff;
    margin-top:20px;
    transition: all 2s;
    list-style: none;
  }
  .containers{
    width: 60px;
    float: left;
    /*background-color: blue;*/

  }