<div ref="navbar" class="out-box" @wheel="handleScroll($event)" @mousedown="handleMoseDown($event)"
@mouseup="handleMouseUp($event)" @mouseleave="handleMouseUp($event)" @mousemove="handleMouseMove($event)">
</div>
data(){
isMouseDown: true,
startX: 0,
scrollLeft: 0
},
methods: {
handleScroll(e) {
const delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail))
e.currentTarget.scrollLeft -= delta * 100
e.preventDefault()
},
handleMouseUp() {
this.isMouseDown = false
},
handleMoseDown(event) {
this.isMouseDown = true
this.startX = event.clientX;
this.scrollLeft = this.$refs.navbar.scrollLeft ;
},
handleMouseMove(event) {
if (this.isMouseDown) {
let moveX = event.clientX;
let scrollX = moveX - this.startX;
this.$refs.navbar.scrollLeft = this.scrollLeft - scrollX
}
}
}
.out-box {
overflow-x: auto;
-ms-overflow-style: none;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}