JS事件句柄-鼠标滚轮控制页面内某部分上下滑功能

鼠标滚轮控制页面上下滑动

问题

1. 开发项目初始定位为面向移动端，现在经理要求在PC端能够正常使用
2. 项目基于VUE框架，主使用的VUX组件库，使用的VUX分页加载组件
3. 移动端上下滑动没问题，PC端使用鼠标拖动没问题，但是滚轮滑动无法触发组件的上下滑动，估计是因为VUX是移动端组件的原因
4. 需求希望能够使用滚轮滑动来控制滑动及分页，能够优化用户体验。
5. 仅仅控制页面中的列表分页部分，页面中的顶部栏与底部栏是不动的。

解决方案

查阅到有个window.onmousewheel事件句柄。现成的滚轮滑动监控功能。
同时，该事件句柄同时也可以用来实现滚轮滑动的其它事件。

• 事件句柄功能闭环。添加事件句柄事件。移除事件句柄事件。

mounted () {
// 添加事件句柄，内部通过赋值操作为事件句柄添加事件。
  this.onmousewheelEvent()
},
destroyed () {
  // 移除事件句柄
  window.onmousewheel = null
}

PS：事件句柄事件添加后需要注意移除，否则容易导致控制台报错等情况。
PS：此次是使用VUE实例的mounted 和destroyed 。也可以使用VUE的路由守卫来实现。

• 滚轮滑动触发事件

思路：

1. 先获取分页滑动组件。此处是使用ClassName获取DOM。主要是为了获取其中的transform属性，通过使用组件自身提供的方法更改transform中的数值，来实现组件的滑动。
2. window.onmousewheel会给事件传递一个参数，此参数内有滚轮滑动的距离、方向等。通过判断这些参数，来判断分页组件中的值应该如何更改（速度、方向、距离等）。

// 添加滚轮滑动事件
onmousewheelEvent () {
  let _self = this,
    elements = document.getElementsByClassName('xs-container'),
    regexp = /\d+/g
  window.onmousewheel = function (e) {
    let change = 0,
      transform = elements[1].style.transform,
      valuelist = transform.match(regexp),
      height = elements[1].clientHeight - document.documentElement.clientHeight + 100
    if (height > 0) {
      // transform有多种形式，对应不同状态下，获取的值的形式也不一样(兼容ie11浏览器的第四种情况（valuelist.length长度为4的情况）)
      // change ：原Y轴位置
      switch (valuelist.length) {
        case 2:
          change = parseInt(valuelist[0])
          break
        case 3:
          change = parseInt(valuelist[1])
          break
        case 4:
          change = parseInt(valuelist[1])
          break
        case 5:
          change = parseInt(valuelist[1])
          break
      }
      //console.log(height+','+change+','+e.wheelDelta)
      //判断滑动方向（上、下）
      if (e.wheelDelta > 0) {
        if (change === 0) {
          // do nothing
        } else {
        //滑动距离若超过了顶部（如距离顶部只有50，但是此处滑动距离是100），则就是回归顶部。滑动时间为600ms
          _self.$refs.scrollerEvent.reset({top: change > 100 ? change - 100 : 0}, 600)
        }
      } else {
        if (change > height) {
        // 滑动到了当前页的底部，要显示加载下一页的动画，控制此时的滑动距离，若上划距离过大会导致用户体验不佳
          _self.$refs.scrollerEvent.reset({top: height - 50}, 600)
        } else {
          _self.$refs.scrollerEvent.reset({top: change + 100}, 600)
        }
      }
    }
  }
}

PS：
其实际使用中发现，获取到的transform发现会有多种形式。好处是用正则表达式处理后都是数组类型，但是数组长度不一。内部元素应该是分别对应X、Y、Z等值，但是有的只有两个，有的有三个，还发现有的会有多个。这也导致要获取的Y轴值的元素位置不一。
但是我发现只要获取的元素个数一定了，那么Y轴值是第几个也就确定了。所以我在代码中通过使用switch来判断如何获取准确的Y轴值。
至于为什么transform的内容不一（准确说应该是数值多少），会发生变化，我暂时没有头脑，谨此记录，留待后续继续学习。

---

createtime：2018-11-16