鼠标滚动一次就是一屏

最新推荐文章于 2023-04-03 10:08:11 发布

sjy7329

最新推荐文章于 2023-04-03 10:08:11 发布

阅读量3.5k

点赞数 1

分类专栏： js

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type="text/css">
    html, body {  height: 100%;  }
    body, ul, li, a, p, div {
        padding: 0px;
        margin: 0px;
        font-size: 14px;
    }
    #wrap {
        overflow: hidden;
        width: 100%;
    }
    #main {
        height: 2944px;
        top: 0;
        position: relative;
    }
    .page {
        width: 100%;
        margin: 0;
    }
    #page1 {
        background: #E4E6CE;
    }
    #page2 {
        background: #6CE26C;
    }
    #page3 {
        background: #BF4938;
    }
    #page4 {
        background: #2932E1;
    }
</style>
<body>
<div id="wrap">
    <div id="main">
        <div id="page1" class="page">page1</div>
        <div id="page2" class="page">page2</div>
        <div id="page3" class="page">page3</div>
        <div id="page4" class="page">page4</div>
    </div>
</div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
    var wrap = document.getElementById("wrap");
    var main = document.getElementById("main");
    var hei = document.body.clientHeight;
    wrap.style.height = hei + "px";
    var obj = document.getElementsByTagName("div");
    for (var i = 0; i < obj.length; i++) {
        if (obj[i].className == 'page') {
            obj[i].style.height = hei + "px";
        }
    };
    //如果不加时间控制，滚动会过度灵敏，一次翻好几屏
    var startTime = 0, //翻屏起始时间
        endTime = 0,
        now = 0;
    //浏览器兼容
    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;
    }
    //滚动事件处理函数
    function scrollFun(event) {
        startTime = new Date().getTime();
        var delta = event.detail || (-event.wheelDelta);
//mousewheel事件中的 “event.wheelDelta” 属性值：返回的如果是正值说明滚轮是向上滚动

//DOMMouseScroll事件中的 “event.detail” 属性值：返回的如果是负值说明滚轮是向上滚动
        if ((endTime - startTime) < -1000) {
            if (delta > 0 && parseInt(main.offsetTop) > -(hei * 3)) {
//向下滚动
                now = now - hei;
                toPage(now);
            }
            if (delta < 0 && parseInt(main.offsetTop) < 0) {
//向上滚动
                now = now + hei;
                toPage(now);
            }
            endTime = new Date().getTime();
        }
        else {
            event.preventDefault();
        }
    }
    function toPage(now) {
        $("#main").animate({top: (now + 'px')}, 1000);     //jquery实现动画效果
    }

</script>
</html>

sjy7329

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
4
评论
鼠标滚动一次就是一屏

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt;&lt;/head&gt;&lt;style type="text/css&
复制链接

扫一扫