Vue中利用Js实现鼠标滚轮控制盒子横向滚动（监听鼠标滚轮滚动事件，火狐DOMMouseScroll、谷歌mousewheel）

思路：使用js来实现监听鼠标滚轮滚动监听事件

<div id="box" class="box">
    <div></div>
</div>

mounted() {
    this.scrollInit()
  },
beforeDestroy(){
      if (navigator.userAgent.indexOf('Firefox') >= 0) {
        this.scrollDiv.removeEventListener('DOMMouseScroll', this.scrollHandler, false)
      } else {
        this.scrollDiv.removeEventListener('mousewheel', this.scrollHandler, false)
      }
    },
methods: {
	scrollInit() {
	      // 获取要绑定事件的元素
	      this.scrollDiv = document.getElementById("box");
	      if (navigator.userAgent.indexOf('Firefox') >= 0) {
	          // 火狐写法 添加滚轮滚动监听事件
	          this.scrollDiv.addEventListener('DOMMouseScroll', this.scrollHandler, false)
	      } else {
	          // 非火狐 添加滚轮滚动监听事件
	          this.scrollDiv.addEventListener('mousewheel', this.scrollHandler, false)
	      }
	},
	scrollHandler(event){
        if(event.preventDefault)
        {
          event.preventDefault();
        }else{
          event.returnValue = false;
        }
        // 获取滚动方向
        const detail = event.wheelDelta || event.detail;
        // 定义滚动方向，其实也可以在赋值的时候写
        const moveForwardStep = 1;
        const moveBackStep = -1;
        // 定义滚动距离
        let step = 0;
        // 判断滚动方向,这里的100可以改，代表滚动幅度，也就是说滚动幅度是自定义的
        if (navigator.userAgent.indexOf('Firefox') >= 0) {
          // 火狐浏览器和谷歌的值正好相反
          if (detail > 0) {
            step = moveForwardStep * 100;
          } else {
            step = moveBackStep * 100;
          }
        }else{
          if (detail < 0) {
            step = moveForwardStep * 100;
          } else {
            step = moveBackStep * 100;
          }
        }
        // 对需要滚动的元素进行滚动操作
        this.scrollDiv.scrollLeft += step;
      },

.box{
  width: 595px;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

P.s.：浏览记录清空了，这个参考文章找不到了。。。

如果大家想一起交流学习，共同进步，欢迎搜索公众号“是日前端”，输入关键词如：前端基础，获取资料，资料刚开始整理，目前还在完善中，点击交流群按钮进交流群，群里仅限技术交流、面试交流等，需要其它相关资料可以群里说，后续交流群人数增多会考虑特色内容，再次感谢大家的支持~