关于滚轮滑动的js效果

最新推荐文章于 2022-11-23 20:57:56 发布

mardins

最新推荐文章于 2022-11-23 20:57:56 发布

阅读量769

点赞数

分类专栏： js操作dom 文章标签： js

本文链接：https://blog.csdn.net/mardins/article/details/106966197

版权

js操作dom 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

关于滚轮滑动的js效果

实现要求：在右侧不显示滚动条，其次在使用鼠标滚动的时候页面中的模块是匀速向下或者向上；
首先写一下基本的网页布局：

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            height: 100vh;
            overflow: hidden;
        }

        .container {
            transform: translateY(0vh);
            transition: 0.5s;
        }

        .container div {
            height: 100vh;
        }
    </style>
</head>

<body>
    <div class="container">
        <div style="background: #ada;"></div>
        <div style="background: #f00;"></div>
        <div style="background: #ff0;"></div>
        <div style="background: #0ff;"></div>
        <div style="background: #00f;"></div>
    </div>

js的驱动效果：

<script>
        let i = 0
        let container = document.querySelector('.container')
        let endTime = new Date() //节流
        window.onmousewheel = e => {
            if (new Date() - endTime < 500)
                return console.log('滚动太频繁，被忽略了');
            if (e.wheelDeltaY < 0) {
                if (i === 4) return;
                i++
            } else {
                if (i === 0) return;
                i--
            }
            container.style.transform = `translateY(-${i * 100}vh)`
            endTime = new Date()
        }

    </script>

mardins

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于滚轮滑动的js效果

关于滚轮滑动的js效果实现要求：在右侧不显示滚动条，其次在使用鼠标滚动的时候页面中的模块是匀速向下或者向上；首先写一下基本的网页布局： <style> * { margin: 0; padding: 0; } body { height: 100vh; overflow: hidden; } .containe
复制链接

扫一扫