js控制div的滚动条移动

// html部分

<template>
    <div class="container js_scroll">
        <el-button type="primary" @click="moveLeft">
            向左
        </el-button>
        <div id="text_container" class="text_container">
            1233333333333333333333333333 1233333333333333333333333333 1233333333333333333333333333
            1233333333333333333333333333 1233333333333333333333333333 1233333333333333333333333333
            1233333333333333333333333333
        </div>
        <el-button type="primary" @click="moveRight">
            向右
        </el-button>
    </div>
</template>

// js部分 

methods: {
    // 左移
    moveLeft() {
        let div = document.getElementById('text_container');
        
        // 判断是否存在滚动条
        if (div.scrollHeight > div.clientHeight || div.offsetHeight > div.clientHeight) {
            
            // 滚动条左移
            div.scrollLeft -= 10;
        }
    },
    // 右移
    moveRight() {
        let div = document.getElementById('text_container');
        
        // 判断是否存在滚动条
        if (div.scrollHeight > div.clientHeight || div.offsetHeight > div.clientHeight) {
            // 滚动条右移
            div.scrollLeft += 10;
        }
    },
},

// css部分

.js_scroll {
    display: flex;
    .text_container {
        white-space: nowrap;
        overflow: auto;
        margin: 0 20px;
    }
}