vue2
//html
<el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
<slot />
</el-scrollbar>
//js
computed: {
scrollWrapper() {
return this.$refs.scrollContainer.$refs.wrap
}
},
handleScroll(e) {
const eventDelta = e.wheelDelta || -e.deltaY * 40
const $scrollWrapper = this.scrollWrapper
$scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
},
vue3
//html
<el-scrollbar ref="scrollContainer" style="height: 35px" @wheel.native.prevent="handleScroll">
<slot />
</el-scrollbar>
//js
const scrollContainer = ref()
const scrollWrapper = computed(() => {
return scrollContainer.value.wrapRef
})
function handleScroll(e:any) {
const eventDelta = e.wheelDelta || -e.deltaY * 40
const $scrollWrapper = scrollWrapper.value
$scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
}
//css
.el-scrollbar__wrap{
overflow-x: auto;
height: calc(100% + 20px); //多出来的20px是横向滚动条默认的样式
}
.el-scrollbar .el-scrollbar__wrap .el-scrollbar__view{
white-space: nowrap;
display: inline-block;
}
