页面随滚轮滑动而动

96 阅读 0 评论 64 点赞

我是靠谱客的博主喜悦豆芽，最近开发中收集的这篇文章主要介绍页面随滚轮滑动而动，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

js实现鼠标滚轮一下滑动一个页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="script/jquery-1.7.2.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100vw;
            overflow-y: hidden;
        }

        #wrap {
            position: absolute;
            width: 100%;
        }

        .page {
            width: 100%;
            height: 100vh;
        }
    </style>
</head>

<body>

    <div id="wrap">
        <div style="background-color: #22b7e4" id="page1" class="page"></div>
        <div style="background-color: #70eec4" id="page2" class="page"></div>
        <div style="background-color: #e3e657" id="page3" class="page"></div>
        <div style="background-color: #8733b7" id="page4" class="page"></div>
        <div style="background-color: #c5274e" id="page5" class="page"></div>
    </div>

</body>
<script>
     //浏览器兼容
    if (navigator.userAgent.toLowerCase().indexOf("firefox") != -1) {
        document.addEventListener("DOMMouseScroll", scrollFun, false);
    } else if (document.addEventListener) {
        document.addEventListener("mousewheel", scrollFun, false);
    } else if (document.attachEvent) {
        document.attachEvent("onmousewheel", scrollFun);
    } else {
        document.onmousewheel = scrollFun;
    }   

    let index = 1;
    let curIndex = 1; //记录当前的页面
    let wrap = document.querySelector("#wrap");
    let pageNum = document.querySelectorAll(".page").length;
    // let hei = 936;
    let hei = window.innerHeight;
    //如果不加时间控制，滚动会过度灵敏，一次翻好几屏
    let startTime = 0, //翻屏起始时间
        endTime = 0,
        now = 0;

    //滚动事件处理函数
    function scrollFun(event) {
        startTime = new Date().getTime();
        let delta = event.detail || -event.wheelDelta;
        console.log(delta);
        //mousewheel事件中的 “event.wheelDelta” 属性值：返回的如果是正值说明滚轮是向上滚动
        //DOMMouseScroll事件中的 “event.detail” 属性值：返回的如果是负值说明滚轮是向上滚动
        if (endTime - startTime < -1000) {
            if (delta > 0 && parseInt(wrap.offsetTop) > -(hei * (pageNum - 1))) {
                //向下滚动
                index++;
                toPage(index);
            }
            if (delta < 0 && parseInt(wrap.offsetTop) < 0) {
                //向上滚动
                index--;
                toPage(index);
            }
            endTime = new Date().getTime();
        }
    }

    function toPage(idx) {
        if (idx != curIndex) {
            //jquery实现动画效果
            let delta = idx - curIndex;
            now = now - delta * hei;
            console.log(now);
            $("#wrap").animate(
                {
                    top: now + "px",
                },
                500
            );
            curIndex = idx;
        }

    }
</script>

</html>

jq实现点击导航栏滚动到对应位置（锚点跳转滑动效果）和导航栏菜单项随页面滚动而变化

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="script/jquery-1.7.2.min.js"></script>
    <style>
        .btn {
            position: fixed;
            right: 10%;
            top: 20%;
        }

        .btn a {
            display: block;
            width: 80px;
            text-align: center;
            color: #fff;
        }
    </style>
</head>

<body>

    <div id='a' style="height:100vh;background:red"></div>
    <div id='b' style="height:100vh;background:yellow"></div>
    <div id='c' style="height:100vh;background:pink"></div>
    <div id='d' style="height:100vh;background:blue"></div>
    <div class='btn'>
        <a href="#a">跳转a</a>
        <a href="#b">跳转b</a>
        <a href="#c">跳转c</a>
        <a href="#d">跳转d</a>
    </div>



</body>
<script>
  
   /*  $('a[href*=#],area[href*=#]').click(function () {      //若报错则改为$(document).on('click', 'a[href^="#"]', function () { 
        if (location.pathname.replace(/^//, '') == this.pathname.replace(/^//, '') && location.hostname == this.hostname) {
            var $target = $(this.hash);
            $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');//获取到点击对应id的元素
            if ($target.length) {
                var targetOffset = $target.offset().top;
                $('html,body').animate({   //滑动效果主要用到jq的animate函数
                    scrollTop: targetOffset
                }, 500);
                return false;
            }
        }
    });
    $(window).scroll(function (event) {
        checkscroll()
    });
    function checkscroll() {
        var winPos = $(window).scrollTop(); //屏幕位置
        var NodePos = [$('#a').offset().top, $('#b').offset().top, $('#c').offset().top, $('#d').offset().top],//提前获取好元素位置
            length = NodePos.length;
        //console.log(NodePos)
        if (winPos <= NodePos[1]) {
            $('.btn a').removeClass('active');
            $('.btn a:nth-child(1)').addClass('active');
        } else {
            for (var i = 1; i < length; i++) {
                if ((i < length - 1 && winPos < NodePos[i + 1] && winPos >= NodePos[i]) || (i == length - 1 && winPos <= NodePos[i])) {
                    $('.btn a').removeClass('active');
                    $('.btn a:nth-child(' + (i + 1) + ')').addClass('active');
                    break;
                }
            }
        }
    }
 */

</script>

</html>