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

至此就實現了滾輪滾動的效果了