el-scrollbar鼠标横向滚动

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