代码

javascript"><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 = 5if (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的这个数字上。