// 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');
// 判斷是否存在滾動(dòng)條
if (div.scrollHeight > div.clientHeight || div.offsetHeight > div.clientHeight) {
// 滾動(dòng)條左移
div.scrollLeft -= 10;
}
},
// 右移
moveRight() {
let div = document.getElementById('text_container');
// 判斷是否存在滾動(dòng)條
if (div.scrollHeight > div.clientHeight || div.offsetHeight > div.clientHeight) {
// 滾動(dòng)條右移
div.scrollLeft += 10;
}
},
},
// css部分
.js_scroll {
display: flex;
.text_container {
white-space: nowrap;
overflow: auto;
margin: 0 20px;
}
}
