抽奖滚动功能

代码

<template>
    <div class="box">
        <video class="video" src="../../assets/video/底层.mp4" loop autoplay muted></video>
        <img class="choujiang" src="../../assets/image/抽奖1.png" alt="" srcset="">
        <!-- <img class="btn" src="../../assets/image/aaa.gif" alt="" srcset=""> -->
        <div class="btn" @click="work">奖</div>
        <div class="number1" ref="numberOne">
            <div class="sum" v-for="(item, index) in number" :key="index">{{ item }}</div>
        </div>
        <div class="number2" ref="numberTwo">
            <div class="sum" v-for="(item, index) in number" :key="index">{{ item }}</div>
        </div>
        <div class="number3" ref="numberThree">
            <div class="sum" v-for="(item, index) in number" :key="index">{{ item }}</div>
        </div>
    </div>
</template>
<script>
export default {
    // 组件名字
    name: 'App',
    // 状态数据
    data() {
        return {
            number: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
            scrollPosition: 0,
            scrollPosition2: 0,
            scrollPosition3: 0,
            isScrolling: true,
            animationFrameId: null,
            animationFrameId2: null,
            animationFrameId3: null,
            targetNumber: null,
            audio: null,
        }
    },
    mounted() {
        this.start()
        // let playButton = document.createElement('button');
        this.audio = document.createElement('audio');
        this.audio.src = require('../../assets/music/祖海 - 好运来.ogg');
        // playButton.addEventListener('click',()=>{
        this.audio.play().then(() => {
            this.audio.loop = true;
        }).catch(error => {
            console.log('播放音频失败:', error);
        });
        // })
    },
    beforeDestroy() {
        if (this.audio) {
            this.audio.pause();
            document.body.removeChild(this.audio); // 移除 audio 元素
        }
    },

    methods: {
        work() {
            if (this.isScrolling) {
                this.targetNumber = 5
                if (this.targetNumber !== null) {
                    const container = this.$refs.numberOne;
                    const sumHeight = container.querySelector('.sum').offsetHeight;
                    const targetIndex = this.number.indexOf(this.targetNumber);
                    const targetPosition = targetIndex * sumHeight;
                    this.stop()
                    container.scrollTop = targetPosition;
                }
            } else {
                this.start()
            }
            this.isScrolling = !this.isScrolling
        },
        start() {
            this.animationFrameId = requestAnimationFrame(this.scroll);
            this.animationFrameId2 = requestAnimationFrame(this.scroll2);
            this.animationFrameId3 = requestAnimationFrame(this.scroll3);

        },
        stop() {
            cancelAnimationFrame(this.animationFrameId);
            this.animationFrameId = null;

            cancelAnimationFrame(this.animationFrameId2);
            this.animationFrameId2 = null;

            cancelAnimationFrame(this.animationFrameId3);
            this.animationFrameId3 = null;
        },
        scroll() {
            this.$nextTick(() => {
                const container = this.$refs.numberOne;
                const sumHeight = container.querySelector('.sum').offsetHeight;
                const totalHeight = sumHeight * this.number.length;
                this.scrollPosition = (this.scrollPosition + sumHeight) % totalHeight;
                container.scrollTop = this.scrollPosition;
                setTimeout(() => {
                    if (this.isScrolling) {
                        this.animationFrameId = requestAnimationFrame(this.scroll);
                    }
                }, 50);
            });
        },
        scroll2() {
            this.$nextTick(() => {
                const container = this.$refs.numberTwo;
                const sumHeight = container.querySelector('.sum').offsetHeight;
                const totalHeight = sumHeight * this.number.length;
                this.scrollPosition2 = (this.scrollPosition2 + sumHeight) % totalHeight;
                container.scrollTop = this.scrollPosition2;
                setTimeout(() => {
                    if (this.isScrolling) {
                        this.animationFrameId2 = requestAnimationFrame(this.scroll2);
                    }
                }, 60);
            });
        },
        scroll3() {
            this.$nextTick(() => {
                const container = this.$refs.numberThree;
                const sumHeight = container.querySelector('.sum').offsetHeight;
                const totalHeight = sumHeight * this.number.length;
                this.scrollPosition3 = (this.scrollPosition3 + sumHeight) % totalHeight;
                container.scrollTop = this.scrollPosition3;
                setTimeout(() => {
                    if (this.isScrolling) {
                        this.animationFrameId3 = requestAnimationFrame(this.scroll3);
                    }
                }, 70);
            });
        }
    }

}
</script>
<style lang="scss" scoped>
.box {
    position: relative;
}

.video {
    width: 100vw;
    height: 100vh;
    position: relative;
    z-index: -99;
    object-fit: cover;
}

.choujiang {
    position: absolute;
    z-index: 99;
    width: 100%;
    height: 1000px;
}

.btn {
    cursor: pointer;
    position: absolute;
    bottom: 100px;
    width: 300px;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
    font-size: 100px;
    border: 1px solid black;
    border-radius: 50%;
    color: #fff;
    text-shadow: 0 0 5px red, 0 0 10px red, 0 0 15px red, 0 0 20px red, 0 0 25px red, 0 0 30px red, 0 0 35px red;
    /* 阴影效果，模拟发光 */
}

.number1 {
    position: absolute;
    width: 250px;
    height: 220px;
    overflow: hidden;
    top: 170px;
    left: 590px;
    text-align: center;
    line-height: 220px;
    display: flex;
    flex-direction: column;
}

.number2 {
    position: absolute;
    width: 250px;
    height: 220px;
    overflow: hidden;
    top: 170px;
    left: 840px;
    text-align: center;
    line-height: 220px;
    display: flex;
    flex-direction: column;
}

.number3 {
    position: absolute;
    width: 250px;
    height: 220px;
    overflow: hidden;
    top: 170px;
    left: 1090px;
    text-align: center;
    line-height: 220px;
    display: flex;
    flex-direction: column;
}

.sum {

    width: 250px;
    height: 220px;
    font-size: 100px;
    font-family: 'pangmenzhengdao';
}
</style>

刚进入页面开始滚动，点击按钮暂停滚动，再次点击继续滚动

此外我给他加了背景音乐，当进入这个页面会自动响起音乐，离开页面的时候自动关闭音乐。

第一个数字我此外让它固定滚动到5的这个数字上。