鼠标滚轮更改transform的值（vue-scroller在PC端的上下滑动）

　　目前上拉刷新，下拉加载，以及区域回弹的组件，绝大多数都是通过transform去实现的。在移动端效果很好，但是PC端使用鼠标拖拽的方式，查看下文首先不符合逻辑，其次容易点进其他页面。

　　起初，项目的初衷是在微信浏览器中查看，但是客户反应有些页面pc端没办法上下滑动（使用了vue-scroller的页面都跪了）。鼠标滚轮默认控制的是滚动条，不是容器的transform属性，怎么可能上下滑动。

　　然后就想如果能监听到鼠标滚轮事件，然后再更改transform:translate3d(x,y,z)，这样不就可以实现pc端vue-scroller的滚动了吗;度娘了一下，还真有鼠标滚轮事件，叫做mousewheel，这货可是原生JS的事件，jquery-free的同学，可以大胆使用。不过比较坑的是这个事件比较冷门，一般没人用，所以官方文档也不详细。

window.onmousewheel = function (e) {
  if(e.wheelDelta<0){
      
  }else{
      
  }
}

　　这个事件包含了一个鼠标事件所没有的属性，wheelDelta，这个属性值始终是120的倍数，而且向上滑动一单位，wheelDelta值为120的倍数，向下为-120的倍数。

下文是vue-scroller在pc端的处理

let _this = this;//此this指向的是vue
window.onmousewheel = function (e) {
  if(e.wheelDelta<0){
    _this.$refs.scrollerBottom && (_this.$refs.scrollerBottom.scrollBy(0, 30, false));//避免ref中不存在scrollerBottom
  }else{
    _this.$refs.scrollerBottom && (_this.$refs.scrollerBottom.scrollBy(0, -30, false));
  }
}

　　vue-scroller中scrollBy和scrollTo的区别就不细讲了，scrollTo就是把View移动到屏幕的X和Y位置，也就是绝对位置。而scrollBy则是相对位置。
　　很简单的就实现了vue-scroller在pc端的上下滑动。（通过触摸板滚动，其实也是调用onmousewheel）

转载于:https://www.cnblogs.com/cjh1111/p/7363836.html