Vue项目-鼠标滚轮实现横向滚动

Vue项目-鼠标滚轮实现横向滚动

---

 

一、需求

如下图当动态的tab栏增加到超出浏览器窗口宽度时，需要有横向滚动，并且实现鼠标滚轮滚动效果

 二、实现

在这之前已经设置好横向滚动的样式了（white-space:nowrap;overflow-x:auto等css样式实现）

　　1、HTML部分

 

<div class="tabBar">
    // ......动态tab栏内容......
<div>

 

　　2、JavaScript部分

mounted中监听元素上的鼠标滚轮事件（mousewheel）：

mounted: function() {
  const tabBar = this.$el.querySelector('.tabBar')
  tabBar.addEventListener('mousewheel', this.handleScroll) // 监听滚轮滚动事件
}

 

methods中定义横向滚动的方法：

handleScroll(e) {
  // 0----down  1----up
  var direction = e.deltaY > 0 ? '0' : '1'
  const tabBar = this.$el.querySelector('.tabBar')
  //下面的实现的是内部元素横向滚动，前提设置好内部元素横向的滚动样式了
  if (direction === '0') {
    tabBar.scrollLeft += 30
  } else {
    tabBar.scrollLeft -= 30
  }
}

至此就实现了滚轮滚动的效果了