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

·  阅读 1859
原生JS实现鼠标滚轮触发页面横向滚动

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

前言

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

思路

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

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

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

JS事件

wheel事件

wheel事件表示用户滚动鼠标滚轮或类似输入设备时触发的事件。 该事件为标准规定的滚轮事件接口。早期的浏览器实现过MouseWheelEventMouseScrollEvent两种滚轮事件接口,但这两种接口皆非标准,加之各浏览器间对其兼容性极差。因而开发者应使用该标准事件接口取代这两个非标准接口。 我们先在caniuser上看一下兼容性: image.png 基本都支持,那么我们在谷歌浏览器中,打印WheelEvent看一下:

image.png

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

既然决定用deltaY属性,当然要在caniuser上查一下兼容性啦: image.png

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

scrollLeft事件

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

image.png

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

代码实现

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

    <style>
        .box{
            display: flex;
            overflow: scroll;
        }
        .item{
            width100vw;
            height300vh;
            flex-shrink0;
        }
        .item:nth-child(1){
            background-imagelinear-gradient(rgb(2509393), rgb(890255));
        }
        .item:nth-child(2){
            background-imagelinear-gradient(rgb(240250150), rgb(104170255));
        }
        .item:nth-child(3){
            background-imagelinear-gradient(rgb(240144253), rgb(153252128));
        }
    </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>
复制代码

运行效果如下: GIF 2021-6-15 21-52-24.gif

完美运行!当然啦,这只是简单实现一下效果,还有更炫酷的页面功能都能基于这个思路做出来,比如滚动鼠标图片变大,或者多个图片重叠渐隐渐显实现花开效果等。

后记

时间过得真快,已经坚持日更十五天了,也许更的博客深度没那么高,但更重要的还是坚持吧~如果短期内有些许迷茫,那么找件事情做下去是最正确不过的选择了。人总阶段性的沉沉浮浮,总需要些莫名的坚持才能愉悦自己。

PS: 今天是我参加掘金更文挑战的第15天,半个月啦!有志者,事竟成。大家一起加油呀~

附更文挑战的文章目录如下:

分类:
前端
标签:
分类:
前端
标签: