https://segmentfault.com/a/1190000017390159?utm_source=tag-newest
<template>
<el-scrollbar
ref="scrollContainer"
:vertical="false"
class="scroll-container"
@wheel.native.prevent="handleScroll"
>
<slot/>
</el-scrollbar>
</template>
<script>
export default {
name: "ScrollPane",
data() {
return {
left: 0
};
},
methods: {
handleScroll(e) {
// wheelDelta:获取滚轮滚动方向,向上120,向下-120,但为常量,与滚轮速率无关
// deltaY:垂直滚动幅度,正值向下滚动。电脑鼠标滚轮垂直行数默认值是3
// wheelDelta只有部分浏览器支持,deltaY几乎所有浏览器都支持
const eventDelta = e.wheelDelta || -e.deltaY * 40;
const $scrollWrapper = this.$refs.scrollContainer.$refs.wrap;
// 0到scrollLeft为滚动区域隐藏部分
$scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4;
}
}
};
</script>