原声js鼠标滚一次一屏

最新推荐文章于 2023-05-13 09:45:26 发布

蒲小若

最新推荐文章于 2023-05-13 09:45:26 发布

阅读量3k

点赞数 4

前端开发经验总结录专栏收录该内容

40 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生js实现一次滚动一屏</title>
    <style>
        html,body{
            height: 100%;
        }
        body{
            margin: 0;
        }
        div{
            height: 100%;
        }
    </style>
</head>
<body>
    <div style="background-color: #1b6d85">
        <div>这是第1屏</div>
    </div>
    <div style="background-color: #5cb85c">
        <div>这是第2屏</div>
    </div>
    <div style="background-color: #8a6d3b">
        <div>这是第3屏</div>
    </div>
    <div style="background-color: #337ab7">
        <div>这是第4屏</div>
    </div>
    <div style="background-color: #66512c">
        <div>这是第5屏</div>
    </div>
</body>
<script>
    document.addEventListener("DOMContentLoaded",function () {
        var body = document.body;
        var html = document.documentElement;
        var itv,height = document.body.offsetHeight;
        var page = scrollTop() / height | 0;
        addEventListener("resize",onresize,false);
        onresize();

        //鼠标滚轮事件
        document.body.addEventListener("onwheel" in document ? "wheel" : "mousewheel",function (e) {
            clearTimeout(itv);
            itv = setTimeout(function () {
                //判断滚轮滚的方向
                var delta = e.wheelDelta / 120 || -e.deltaY / 3;
                page -= delta;
                var max = (document.body.scrollHeight / height | 0) -1;
                if (page < 0){
                    return page = 0;
                }
                if (page > max){
                    return page = max;
                }
                move();
            },100);
            e.preventDefault();
        });
        //当窗体发生变化时还是保证每次滚动滚一屏
        function  onresize() {
            height = body.offsetHeight;
            move();
        };
        
        function  move() {
            var value = height * page;
            var diff = scrollTop() - value;
            (function callee() {
                diff = diff / 1.2 | 0;
                scrollTop(value + diff);
                if (diff){
                    itv = setTimeout(callee,16);
                }
            })();
        };

        function scrollTop(v) {
            if (v == null){
                return Math.max(body.scrollTop,html.scrollTop);
            }else{
                body.scrollTop = html.scrollTop = v;
            }
        }
    })
</script>
</html>