h5滑动选择打分功能（老虎机）

 html

  <div class="machine" v-show="showMachine" @click.stop="showMachine = true">
      <img src="../assets/machine.png" alt="" />
      <div class="title">您正在為xxx主播進行打分</div>
      <div id="score">
        <div
          v-for="(itemScore, indexScore) in scoreList"
          :key="indexScore"
          class="num"
          :style="{
            color: scoreNum === indexScore ? '#3A59FF' : '#984afe',
            fontSize: scoreNum === indexScore ? '4.8rem' : '3rem',
            lineHeight: scoreNum === indexScore ? '5rem' : '4rem',
            fontWeight: scoreNum === indexScore ? 'bold' : 'normal',
          }"
        >
          <div>{{ itemScore.num }}<span class="fen">分</span></div>
        </div>
      </div>

      <div class="sure" @click="makeSure">
        <img src="/src/assets/sure.png" alt="" />
      </div>
    </div>

script

export default {
  data() {
    return {
      showMachine: false, // 显示机台
      isVideoVisible: false, // 视频是否可见
      scoreList: [
        { num: "01" },
        { num: "02" },
        { num: "03" },
        { num: "04" },
        { num: "05" },
        { num: "06" },
      ],
      scoreNum: 0,
      scrollView: 0,
    };
  },

  methods: {
    openMachine() {
      this.showMachine = true;
      document.body.style.overflow = "hidden";
      // 获取滚动盒子元素
      var scrollBox = document.getElementById("score");
      // 添加滚动事件监听器
      scrollBox.addEventListener("scroll", this.debounce(this.handleScrollStop, 100));
    },
    debounce(func, wait) {
      let timeout;
      return function executedFunction() {
        const context = this;
        const scrollTop = context.scrollTop; // 获取滚动距离
        clearTimeout(timeout); // 清除上一次延时函数
        timeout = setTimeout(() => {
          func.call(context, scrollTop); // 延时后执行函数
        }, wait);
      };
    },
    handleScrollStop(scrollTop) {
      if (0 < scrollTop && scrollTop <= 40) {
        this.scoreNum = 1;
        scrollTop = 31;
      } else if (40 < scrollTop && scrollTop <= 80) {
        this.scoreNum = 2;
        scrollTop = 62;
      } else if (80 < scrollTop && scrollTop <= 120) {
        this.scoreNum = 3;
        scrollTop = 94;
      } else if (120 < scrollTop && scrollTop <= 150) {
        this.scoreNum = 4;
        scrollTop = 125;
      } else if (150 < scrollTop && scrollTop <= 200) {
        this.scoreNum = 5;
        scrollTop = 157;
      } else if (200 < scrollTop && scrollTop <= 240) {
        this.scoreNum = 6;
      } else if (240 < scrollTop && scrollTop <= 280) {
        this.scoreNum = 7;
      } else {
        this.scoreNum = 0;
      }
      this.scrollView = scrollTop;
      // 这里可以执行一些基于滚动位置的操作
      this.debounce(this.changeScroll(), 500);
    },
// 滚动指定位置
    changeScroll() {
      const scrollBox = document.getElementById("score");
      scrollBox.scrollTo({
        top: this.scrollView,
        behavior: "smooth",
      });
    },

    // 确认打分
    makeSure() {},
  },
};

 css

  // 显示机台
  .machine {
    position: fixed;
    animation: shake 0.5s;
    top: 15rem;
    z-index: 1000;
    .title {
      position: absolute;
      top: 8.2rem;
      left: 12rem;
      font-weight: 600;
      font-size: 2.2936rem;
      color: #ffffff;
    }
    .sure {
      position: absolute;
      bottom: 18.5rem;
      left: 15rem;
      width: 20rem;
      height: 8rem;
      &:active {
        animation: shake 0.5s;
      }
    }

    /* 定义关键帧动画 */
    @keyframes shake {
      0% {
        transform: translateZ(0);
      }

      90% {
        transform: translateZ(-3px) rotate(2deg);
      }

      80% {
        transform: translateZ(3px) rotate(-2deg);
      }
      100% {
        transform: translateZ(0);
      }
    }
    #score {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 3.0581rem;
      color: #984afe;
      position: absolute;
      top: 20.4rem;
      left: 10rem;
      overflow: hidden;
      height: 19rem;
      width: 30rem;
      overflow-y: auto;
      padding: 7rem 0;
      &::-webkit-scrollbar {
        width: 0; /* 设置滚动条宽度为0 */
        background: transparent; /* 隐藏滚动条背景 */
        display: none;
      }
      .num {
        height: 4.8rem;
      }
      .fen {
        font-size: 1.682rem;
        line-height: 2.4rem;
      }
    }
  }