vue 实现通过鼠标滚轮横向滚动

 

鼠标放上去，滚动鼠标滚轮，可左右滑动标签内容 

template 中的代码

<div class="tab-list" id="nav">
  <div class="tab-item" v-for="(item,index) in list" :key=""> </div>
</div>

mounted() {
  this.scrollInit(); // 初始化滚动事件
},
methods: {
  // 初始化与绑定监听事件方法
  scrollInit() {
    // 获取要绑定事件的元素
    const nav = document.getElementById("nav")
    // document.addEventListener('DOMMouseScroll', handler, false)
    // 添加滚轮滚动监听事件，一般是用下面的方法，上面的是火狐的写法
    nav.addEventListener('mousewheel', this.handler, false)
  },
  // 滚动事件的出来函数
  handler(event) {
    // 获取要绑定事件的元素
    const nav = document.getElementById("nav")
    // 获取滚动方向
    const detail = event.wheelDelta || event.detail;
    // 定义滚动方向，其实也可以在赋值的时候写
    const moveForwardStep = 1;
    const moveBackStep = -1;
    // 定义滚动距离
    let step = 0;
    // 判断滚动方向,这里的100可以改，代表滚动幅度，也就是说滚动幅度是自定义的
    if (detail < 0) {
      step = moveForwardStep * 100;
    } else {
      step = moveBackStep * 100;
    }
    // 对需要滚动的元素进行滚动操作
    nav.scrollLeft += step;
  },
}

css代码：

.tab-list{
  display: flex;
  align-items: center;
  overflow-x: auto;
  transition:all 500ms linear; // 滑动动画
}
.tab-list::-webkit-scrollbar {
  height: 0; // 隐藏滚动条
}