vue3实现鼠标滚轮控制横向滚动条滚动

在main.ts中注册全局自定义指令

app.directive('scrollX', {
  // 在元素被绑定到DOM中的时候调用
  mounted(el) {
    el.addEventListener('wheel', function (event) {
      event.preventDefault()
      el.scrollLeft += event.deltaY
    })
  },
  // 在元素被解绑的时候调用
  unmounted(el) {
    el.removeEventListener('wheel', function (event) {
      event.preventDefault()
      el.scrollLeft += event.deltaY
    })
  }
})

然后在需要的元素上使用v-scrollX 就可以啦，当然还有纯css的实现方案。不过本人还未验证，等验证后再贴出