1、使用 transform: translateX()，循環將滾動內容在容器內偏移，超出容器部分隱藏；
2、避免滾動到末尾時出現空白，需要預留多幾個。
3、一次循環偏移的距離scrollLoopWidth?可能受樣式影響需要做些微調，比如單個item的寬度、間隔、邊框等。
<template><div><div class="scroll-container"><div class="scroll-content" id="scroll-content"><div class="scroll-item" v-for="(item, index) in itemList" :key="index"><div>{{ item.title }}</div><div>{{ item.desc }}</div></div></div></div></div>
</template>
<script>
export default {data() {return {itemList: [{title: "Vue",desc: "一套用于構建用戶界面的漸進式框架"},{title: "Vite",desc: "下一代前端開發與構建工具"},{title: "Pinia",desc: "Vue狀態管理框架"},{title: "TypeScript",desc: "JavaScript類型的超集，可以編譯成純JavaScript"},{title: "NaiveUI",desc: "Vue3組件庫"},// 重復放幾個，假裝無縫銜接，如果重復的個數需要多個才能鋪滿屏，可以使用數組的相關方法將已經滾動過了的放到數組后面{title: "Vue",desc: "一套用于構建用戶界面的漸進式框架"},{title: "Vite",desc: "下一代前端開發與構建工具"},{title: "Pinia",desc: "Vue狀態管理框架"}],scrollContent: "",scrollSpeed: 1, // 每次偏移像素translateX: 0,scrollInterval: 0,scrollLoopWidth: 0,}},mounted() {this.scrollContent = document.getElementById("scroll-content");let item = this.itemList.length - 3; // 一次循環移動的item數this.scrollLoopWidth = 240 * item + 10 * (2 * item + 1); // 單個寬度 * 個數 + 間隔 （注意，這里可能受樣式影響，需要做適當的調整）this.scrollInterval = setInterval(() => {this.autoScrollContent();}, 10); // 每10毫秒移動 scrollSpeed 個像素},methods: {autoScrollContent() {this.translateX += this.scrollSpeed;this.scrollContent.style.transform = `translateX(${-this.translateX}px)`;// 一次循環結束，重新滾動if (this.translateX >= this.scrollLoopWidth) {this.translateX = 0;}},},
}
</script>
<style lang="stylus" scoped>.scroll-container {width: 800px;height: 400px;background-color: #e9e9e9;overflow: hidden;.scroll-content {display: flex;align-items: center;.scroll-item {width: 240px;min-width: 240px;height: 100px;text-align: center;margin: 0 10px;border: 1px solid #409eff;img {width: 50px;height: 50px;border-radius: 25px;}}}}
</style>
