vue实现滚动条点击切换距离（滚动条隐藏样式）
Posted web半晨
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue实现滚动条点击切换距离（滚动条隐藏样式）相关的知识，希望对你有一定的参考价值。
1、html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>点击移动</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div id="app">
<div class="content_box" ref="refScrollLeft">
<div class="item" v-for="item in 24" :key="item" @click="clickMovement(item)">{{item}}
</div>
</div>
</div>
<script src="/node_modules/vue/dist/vue.js"></script>
<script src="./index.js"></script>
</body>
</html>
2、javascript
new Vue({
el: "#app",
data() {
return {
oldVal: 0,
scrollLeft: 0
}
},
mounted() {
},
methods: {
clickMovement(val) {
if (val > this.oldVal) {
this.scrollLeft = this.scrollLeft + 180;
} else if (val < this.oldVal) {
this.scrollLeft = this.scrollLeft - 180;
} else if (val == this.oldVal) {
this.scrollLeft = this.scrollLeft
}
// 关键代码
this.$refs.refScrollLeft.scrollLeft = this.scrollLeft;
this.oldVal = val;
}
}
});
3、css
#app {
position: absolute;
left: 50%;
transform: translate(-50%, );
}
.content_box {
width: 300px;
display: flex;
align-items: center;
padding: 1em 0;
overflow-x: scroll;
}
.content_box::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
}
.item {
height: 2em;
text-align: center;
line-height: 2em;
background-color: #686868;
color: #fff;
margin: 0 10px;
padding: 0 1em;
cursor: pointer;
}
以上是关于vue实现滚动条点击切换距离（滚动条隐藏样式）的主要内容，如果未能解决你的问题，请参考以下文章