实现鼠标横向滚动

在一些页面中，我们需要实现鼠标的横向滚动，虽然可以通过shift+鼠标滚动来达到横向滚动的目的，但是用户体验并不好。

下面代码来实现鼠标的横向滚动：

dom

<ul ref="systemGroupUlRef">

</ul>

实现方法

// 滚动组件实例
const systemGroupUlRef = ref();

// 初始化与绑定监听事件方法
const scrollInit = () => {
  systemGroupUlRef.value.addEventListener('mousewheel', handler, false);
  // 滚动事件的出来函数
  function handler(event) {
    // 获取滚动方向
    const detail = event.wheelDelta || event.detail;
    // 定义滚动方向，其实也可以在赋值的时候写
    const moveForwardStep = 1;
    const moveBackStep = -1;
    // 定义滚动距离
    let step = 0;
    // 判断滚动方向,这里的100可以改，代表滚动幅度，也就是说滚动幅度是自定义的
    if (detail < 0) {
      step = moveForwardStep * 100;
    } else {
      step = moveBackStep * 100;
    }
    // 对需要滚动的元素进行滚动操作
    systemGroupUlRef.value.scrollLeft += step;
  }
};

//组件挂载完毕操作
onMounted(() => {
  scrollInit();
});