原生JS实现鼠标滚轮触发页面横向滚动-一一网

这是我参与更文挑战的第15天，活动详情查看：更文挑战

前言

今天翻看别人的博客，看到一个很有意思的效果，就是鼠标滚轮滚动，页面会进行左右滚动，同时有一些其它的效果，看起来非常的炫酷，所以我就想试试用原生JS实现类似的效果。说干就干，写完发现还挺简单的，虽然做完觉得很简单，但是如果深入去探究其中的机制，以及各种浏览器之间的差异，还是很复杂的，毕竟学无止境，加油吧~

思路

想要在鼠标滚轮滚动的时候，页面左右滚动，首先要监听鼠标滚动的滚动事件，其次要阻止默认滚动事件，同时给页面加上我们需要的滚动效果即可。即：

监听鼠标滚动的滚动事件
阻止默认滚动事件
添加页面左右滚动效果

大概思路是这样，下面就可以开始研究涉及到的JS事件了。

JS事件

wheel事件

wheel事件表示用户滚动鼠标滚轮或类似输入设备时触发的事件。
该事件为标准规定的滚轮事件接口。早期的浏览器实现过MouseWheelEvent和MouseScrollEvent两种滚轮事件接口，但这两种接口皆非标准，加之各浏览器间对其兼容性极差。因而开发者应使用该标准事件接口取代这两个非标准接口。
我们先在caniuser上看一下兼容性：

基本都支持，那么我们在谷歌浏览器中，打印WheelEvent看一下：

这么多属性值我们用到了哪些呢？我们能用到的只有wheelDelta或者deltaY，它们两个用于表示在Y轴滚动。查了不少资料，发现wheelDelta只有部分浏览器支持，deltaY几乎所有浏览器都支持，所以滚动值应该以deltaY为准。

既然决定用deltaY属性，当然要在caniuser上查一下兼容性啦：

经测试发现，在360浏览器、QQ浏览器、Edge浏览器、谷歌浏览器中，向上滚动deltaY值为-125，向下滚动deltaY值为125。而在火狐浏览器中，向上滚动deltaY值为-54，向下滚动deltaY值为-54。

scrollLeft事件

scrollLeft用于设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。之前我写过一篇博客《获取当前元素到页面底部的距离及其他获取距离问题》，在里面我做过一张图片来详细讲解过：

scrollLeft和scrollTop表示含义一样，只是方向不一样而已。

代码实现

思路有了，JS事件也有了，下面就是代码的实现了。

    <style>
        .box{
            display: flex;
            overflow: scroll;
        }
        .item{
            width: 100vw;
            height: 300vh;
            flex-shrink: 0;
        }
        .item:nth-child(1){
            background-image: linear-gradient(rgb(250, 93, 93), rgb(89, 0, 255));
        }
        .item:nth-child(2){
            background-image: linear-gradient(rgb(240, 250, 150), rgb(104, 170, 255));
        }
        .item:nth-child(3){
            background-image: linear-gradient(rgb(240, 144, 253), rgb(153, 252, 128));
        }
    </style>



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



    <script>
        let box = document.querySelector('.box')
        box.addEventListener('wheel', (event)=>{
            event.preventDefault()
            box.scrollLeft += event.deltaY
        })
    </script>
复制代码