左右点击滚动

<template>
  <div>
    <div>
      <el-button @click="lunBoDia = false">关闭轮播</el-button>
      <div>
        <el-button @click="btnClick(-1)">左</el-button>
      </div>
      <div>
        <el-button @click="btnClick(1)">右</el-button>
      </div>
    </div>
    <div class="hello">
      <div class="div1" ref="div1Ref" id="asd">
        <div ref="scrolla">
          <div class="item1Div" @click="item1Click(item, index)" :class="{ active: index == curIndex }" v-for="(item, index) in arr1" :ref="'left' + index" :key="index + '22'">{{ item.name }}</div>
        </div>
      </div>

      <div class="div2">
        <div class="youMainDiv">
          <div class="rightDiv">
            <div @click="item2Click(item2, index2)" :class="{ active2: index2 == curIndex }" v-for="(item2, index2) in arr1" :key="item2.name">
              <el-image style="width: 100px; height: 100px; margin-left: 10px" :src="item2.name" fit="cover"></el-image>
            </div>
          </div>
        </div>

        <div class="lunBoDiv" v-show="lunBoDia && arr1.length">
          <el-image style="width: 100px; height: 100px" :src="arr1[curIndex].name"></el-image>
          <div>{{ arr1[curIndex].name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
  },
  data() {
    return {
      curIndex: 0,
      lunBoDia: false,
      arr1: [],
      imagePath: '',
    };
  },
  created() {
    for (let index = 0; index < 3; index++) {
      let obj = { name: index + '.png', type: 1 };
      this.arr1.push(obj);
    }
  },
  mounted() {},
  methods: {
    item1Click(item, index) {
      this.curIndex = index;
    
    },
    leftScrollHandler() {
      const ceilHeight = 22;
      const curRef = 'left' + this.curIndex;
      const domRef = this.$refs[curRef][0];

      let parTop = this.$refs.div1Ref.offsetTop;
      let curTop = domRef.offsetTop;
      let cha = curTop - parTop + ceilHeight;
      let scrollHeight = cha - 300;

      if (scrollHeight >= 0) {
        this.$refs.div1Ref.scrollTop = scrollHeight;
      } else {
        this.$refs.div1Ref.scrollTop = 0;
      }
    },
    item2Click(item2, index2) {
      this.curIndex = index2;
      this.lunBoDia = true;
      this.leftScrollHandler();
    },
    lunBoChange(val) {
      this.curIndex = val;
    },
    btnClick(num) {
      let a = this.curIndex + num;
      if (a < 0) {
        a = 0;
      } else if (a == this.arr1.length) {
        a = this.arr1.length - 1;
      }
      this.curIndex = a;
      this.leftScrollHandler();
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.hello {
  width: 600px;
  height: 300px;
  border: 1px solid red;
  overflow: hidden;
  display: flex;
  .div1 {
    height: 100%;
    width: 100px;
    overflow: auto;
  }
  .div2 {
    position: relative;
    flex: 1;
    .youMainDiv {
      overflow: auto;
      height: 300px;
      .rightDiv {
        display: flex;
        flex-wrap: wrap;
      }
    }
    .lunBoDiv {
      position: absolute;
      top: 0;
      left: 0;
      right: 70px;
      height: 250px;
      background: pink;
      scroll-behavior: unset;
    }
  }
}
.active {
  color: red;
}
.active2 {
  border: 1px solid red;
}
.item1Div {
  cursor: pointer;
}
</style>