js实现鼠标横向滚动

前言

今天整一个比较简单但是能够大幅提升用户使用体验的一个功能，看标题也知道了，就是鼠标滑轮实现横向滚动

实现方式

一般我们使用滚轮的时候都是上下滚动的，横向滚动只能靠拖拽滚动条，比如

这种情况想看到后面的文字，就只能拖拽下面的滚动条，要是产品跟你说滚动条样式太丑，改的细小一点，那鼠标拖拽可就遭老罪了

但是我们可以通过js方法实现使用滚轮来进行横向滚动；

废话不说直接上代码

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div
      id="app"
      style="
        width: 300px;
        height: 200px;
        border: 1px solid red;
        overflow-x: hidden;
        white-space: nowrap;
      "
    >
      讲述了天才少年萧炎在创造了家族空前绝后的修炼纪录后突然成了废人，种种打击接踵而至。就在他即将绝望的时候，一缕灵魂从他手上的戒指里浮现，一扇全新的大门在面前开启，经过艰苦修炼最终成就辉煌的故事。
      这里是属于斗气的世界，没有花俏艳丽的魔法，有的，仅仅是繁衍到巅峰的斗气！
      01:33 小说世界
      主角萧炎，原是萧家历史上空前绝后的斗气修炼天才，4岁就开始修炼斗之气，10岁拥有了九段斗之气，11岁凝聚斗之气旋，一跃成为家族百年来最年轻的斗者。然而在11岁那年，他却"丧失"了修炼能力，并且斗气逐渐减少，直至三段斗之气。整整三年多时间，家族冷落，旁人轻视，被未婚妻退婚......种种打击接踵而至
      [1]。
      就在他即将绝望的时候，一缕灵魂从他手上的戒指里浮现，一扇全新的大门在面前开启！萧炎重新成为家族年轻一辈中的佼佼者，受到众人的仰慕，他却不满足于此。为了一雪退婚带来的耻辱，萧炎来到了魔兽山脉，在药老的帮助下，为了进一步提升自己的修为，在魔兽山脉，他结识了小医仙，云芝（云岚宗宗主云韵）等人，他发现自己面向的世界更加宽广了。
      三十年河东，三十年河西，莫欺少年穷！
      年仅15岁的萧家废物，于此地，立下了誓言，从今以后便一步步走向斗气大陆巅峰！
      经历了一系列的磨练：收异火，寻宝物，炼丹药，斗魂族。
      最终成为斗帝，为解开斗帝失踪之谜而前往大千世界
    </div>
    <script>
      const app = document.getElementById("app");

      app.addEventListener(
        "wheel",
        (e) => {
          app.scrollLeft += e.deltaY;
        },
        {
          passive: false,
        }
      );
    </script>
  </body>
</html>

没错，代码就是这么简单，核心就是设置passive：false

passive：false的含义（mdn解释）：一个布尔值，设置为 true 时，表示 listener 永远不会调用 preventDefault()

你会发现，如果不设置passive：false的话，使用阻止默认事件

会出现报错，原因是因为像这种事件是无法通过默认事件阻止的，必须要使用这个参数。此事在mdn亦有说明

总结

以上就是关于如何使用鼠标滚轮实现横向滚动，还是很简单的