js 滚轴事件demo

最新推荐文章于 2023-04-19 13:30:42 发布

zl_41123262

最新推荐文章于 2023-04-19 13:30:42 发布

阅读量127

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_41123262/article/details/106959903

版权

本文介绍了一种实现网页整页翻动效果的方法，通过CSS和JavaScript控制页面元素的过渡动画，实现平滑的翻页体验。文章包含了完整的HTML、CSS和JavaScript代码，展示了如何使用固定位置的指示器进行页面导航。

摘要由CSDN通过智能技术生成

整页翻动效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>整页翻动效果</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body{
            height: 100vh;
             /* 溢出隐藏 */
             overflow: hidden;
        }

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

        .container div{
            height: 100vh;
        }

        .indexs{
            width: 20px;
            position: fixed;
            right: 10px;
            top: 50%;
            transform: translate(-50%);
        }

        .indexs li{
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #000;
            margin: 10px 0;
        }

        .indexs li.active{
            background-color: #fff;
        }
    </style>
</head>
<body>
    <div class="container">
        <div style="background-color: skyblue;"></div>
        <div style="background-color: slateblue;"></div>
        <div style="background-color: slategray;"></div>
        <div style="background-color: yellowgreen;"></div>
        <div style="background-color: wheat;"></div>
    </div>
    <ul class="indexs">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

    <script>
        let i = 0;
        let container = document.querySelector('.container')
        let indexs = document.querySelector('.indexs')

        let endTime = new Date(); // 节流
        window.onmousewheel = e => {
            if(new Date() - endTime < 500) return;
            if(e.wheelDeltaY < 0){ // 向上滚动
                if(i===4) return;
                i++
            }else{ // 向下滚动
                if(i===0) return;
                i--
            }
            container.style.transform = `translateY(-${i * 100}vh)`
            let active = document.querySelector('.indexs li.active')
            active.classList.remove('active')
            indexs.children[i].classList.add('active')
            endTime = new Date();
        }

        for(let j = 0;j<indexs.children.length;j++){
            indexs.children[j].onmouseenter = function(){
                let active = document.querySelector('.indexs li.active')
                active.classList.remove('active')
                this.classList.add('active')
                i = j
                container.style.transform = `translateY(-${i * 100}vh)`
            }
        }
    </script>
</body>
</html>