vue实现全屏滚动 走马灯纵向滚动

element+vue2

<template>
  <div @mousewheel="rollScroll($event)">
    <el-carousel
      :height="computeHeightBig"
      direction="vertical"
      :autoplay="false"
      ref="swiper"
      @mousewheel="rollScroll($event)"
      trigger="click"
    >
      <el-carousel-item></el-carousel-item>
      <el-carousel-item></el-carousel-item>
    </el-carousel>
  </div>
</template>
<script>
export default {
computed: {
    //计算高度
    computeHeight() {
      let screenHeight = document.body.clientWidth;
      if (screenHeight > 415) {
        return "936px";
      } else {
        return "300px";
      }
    },
    computeHeightBig(){
      let screenHeight = document.body.clientWidth;
      if (screenHeight > 1488) {
        return "1080px";
      } else {
        return "750px";
      }
    }
  },
 methods: {
    rollScroll(event) {
      let scrollVal = event.wheelDelta || event.detail;
      if (!this.timeOut) {
        this.timeOut = setTimeout(() => {
          this.timeOut = null;
          scrollVal > 0 ? this.$refs.swiper.prev() : this.$refs.swiper.next();
        }, 600);
      } else {
      }
    },
  },
}
</script>

参考链接：vue3 element plus 走马灯纵向滚动鼠标滚动_el-carousel支持scroll事件_steven596cl的博客-CSDN博客