vue实现滚动条点击切换距离（滚动条隐藏样式）

1、html

{item}}  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; }