image.png

代碼：

<template>
    <div class="scroll-root-container">
        <div class="scroll-button left" v-if="showScrollButton" @click="handleScroll('left')">
            <i class="el-icon-arrow-left"></i>
        </div>
        <div class="scroll-button right" v-if="showScrollButton" @click="handleScroll('right')">
            <i class="el-icon-arrow-right"></i>
        </div>
        <div
            class="scroll-root"
            ref="parent"
        >
            <div class="scroll-container" ref="scrollContent">
                為高校生活購買 Mac 或 iPad，AirPods 搭配其中仁锯。
                以教育優(yōu)惠購買符合條件的 Mac 或 iPad哑姚，現(xiàn)搭配 AirPods借尿，并可選擇升級至 AirPods Pro1暂筝。還能 8 折加購 AppleCare+ 服務(wù)計劃燎字，享受配件優(yōu)惠2膘螟。
                為高校生活購買 Mac 或 iPad沿猜，AirPods 搭配其中念逞。
                以教育優(yōu)惠購買符合條件的 Mac 或 iPad困食，現(xiàn)搭配 AirPods，并可選擇升級至 AirPods Pro1翎承。還能 8 折加購 AppleCare+ 服務(wù)計劃硕盹，享受配件優(yōu)惠2。
                為高校生活購買 Mac 或 iPad叨咖，AirPods 搭配其中瘩例。
                以教育優(yōu)惠購買符合條件的 Mac 或 iPad啊胶，現(xiàn)搭配 AirPods，并可選擇升級至 AirPods Pro1垛贤。還能 8 折加購 AppleCare+ 服務(wù)計劃焰坪，享受配件優(yōu)惠2。
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Scroll',
    data() {
        return {
            showScrollButton: false,
        }
    },
    mounted() {
        const { $refs: { parent, scrollContent } } = this
        // 第一次加載時判斷是否需要顯示左右滾動按鈕聘惦，如果父容器的寬度大于子容器的寬度就不用
        if (parent && scrollContent) {
            this.showScrollButton = parent.offsetWidth < scrollContent.offsetWidth
        }
    },
    methods: {
        handleScroll(direction) {
            // 每10毫秒移動20某饰，點擊一次移動十次,根據(jù)自己需要調(diào)整
            let times = 0
            const interval = 10
            const moveInterval = 20
            const totalTimes = 10
            const vm = this
            const scroll = () => {
                times++
                const offset = vm.$refs.parent.scrollLeft
                vm.$refs.parent.scrollLeft = direction === 'right'? offset + moveInterval  : offset - moveInterval 
                if (times !== totalTimes ) {
                    setTimeout(scroll, interval )
                }
            }
            scroll()
        },
    },
}
</script>

<style scoped>
    .scroll-root-container {
        position: relative;
        width: 700px;
        margin: 0 auto;
        border-left: 1px solid black;
        border-right: 1px solid black;
    }
    .scroll-root {
        width: 100%;
        height: 300px;
        overflow-x: auto;
        scrollbar-width: none; /* Firefox 隱藏滾動條 */
    }
    .scroll-root::-webkit-scrollbar {
        display: none; /* chrome 隱藏滾動條 */

    }
    .scroll-container {
        width: 1000px;
        height: 100%;
    }
    .scroll-button {
        width: 19px;
        height: 40px;
        cursor: pointer;
        position: absolute;
        top: 140px;
        line-height: 40px;
        background: rgba(0, 0, 0, 0.51);
    }
    .el-icon-arrow-left,.el-icon-arrow-right {
        font-weight: bolder;
        font-size: 16px;
    }
    .left {
        left: 0;
        border-bottom-right-radius: 20px;
        border-top-right-radius: 20px;
    }
    .right {
        right: -1px;
        border-bottom-left-radius: 20px;
        border-top-left-radius: 20px;
    }
    .el-icon-arrow-left {
        margin-left: -8px;
    }
    .el-icon-arrow-right {
        margin-right: -8px;
    }
</style>