前端实现鼠标滑动滚轴 滚动轴左右滚动 div盒子左右滚动

文章来源地址https://uudwc.com/A/Rx2my

	前端实现鼠标滑动滚轴 滚动轴左右滚动 其核心思想就是监听盒子内部的鼠标滚动事件，将鼠标滚动
轴上下滚动的值转为该盒子内部的滚动值来实现盒子内部的左右滚动。

//盒子部分
      <div class="testScroll"
           ref="outsideWrap"
           @mousewheel="ONMouseWheel($event)">
        <div class="scrollCon">
          222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222111111
        </div>
      </div>

// 事件
ONMouseWheel (e) {
      console.log(1);
      // wheelDelta的值为正（120.240...）则是鼠标向上；为负（-120，-240）则是向下。 
      // 因为要兼容浏览器，所以才写成 -e.wheelDelta || -e.deltaY.部分浏览器这个e.wheelDeltaY值是没有的可能是null，部分浏览器e.deltaY这个值是没有的可能是null，
      let eventDelta = -e.wheelDelta || -e.deltaY * 40;
      let outsideWrap = this.$refs.outsideWrap;
      outsideWrap.scrollLeft = outsideWrap.scrollLeft + eventDelta / 2;
    }