全屏滚动

最新推荐文章于 2022-11-19 15:42:24 发布

i鲸落

最新推荐文章于 2022-11-19 15:42:24 发布

阅读量471

点赞数

本文链接：https://blog.csdn.net/XinYe666666/article/details/80929435

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            overflow: hidden;
        }
        div{
            width: 100vw;
            height: 100vh;
            font: 30px "";
            text-align: center;
        }
        div:nth-child(1){
            background: #3cc2f4;
        }
        div:nth-child(2){
            background: #00B198;
        }
        div:nth-child(3){
            background: #AD4D49;
        }
        div:nth-child(4){
            background: #6a9ccb;
        }
        div:nth-child(5){
            background: #7E7E7E;
        }
    </style>
</head>
<body>
<!--<div id="box">-->
    <div>第一页</div>
    <div>第二页</div>
    <div>第三页</div>
    <div>第四页</div>
    <div>第五页</div>
<!--</div>-->
<script>
    var div=document.getElementsByTagName('div');
    if(window.addEventListener){
        // 兼容谷歌、ie等除火狐外
        window.addEventListener('DOMMouseScroll',wheel);
    }
    // 兼容谷歌、ie等除火狐外
    window.onmousewheel=wheel;
    function wheel(ev){
        var e=ev||window.event;
        var limit=div[0].offsetHeight;
        var delta=0;
        if(e.wheelDelta){
            // 判断谷歌、ie等除火狐外
            delta=e.wheelDelta;
        }
        else if(e.detail){
            // 判断谷歌、ie等除火狐外
            delta=-e.detail;
        }
        if(delta<0){
            var down=setInterval(function(){
                scroll=document.documentElement.scrollTop||document.body.scrollTop;
                console.log(scroll);
                window.onmousewheel=null;
                if(window.addEventListener){
                    window.removeEventListener('DOMMouseScroll',wheel);
                }
                window.scrollBy(0,1);
                if(scroll%limit<1){
                    clearInterval(down);
                    if(window.addEventListener){
                        window.addEventListener('DOMMouseScroll',wheel);
                    }
                    window.onmousewheel=wheel;
                }
            },1);
        }
        else{
            var up=setInterval(function(){
                scroll=document.documentElement.scrollTop||document.body.scrollTop;
                window.scrollBy(0,-1);
                window.onmousewheel=null;
                if(window.addEventListener){
                    window.removeEventListener('DOMMouseScroll',wheel);
                }
                if(scroll%limit<1){
                    clearInterval(up);
                    if(window.addEventListener){
                        window.addEventListener('DOMMouseScroll',wheel);
                    }
                    window.onmousewheel=wheel;
                }
            },1);
        }
    }



</script>
</body>
</html>

i鲸落

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
全屏滚动

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; *{ margin: 0;
复制链接

扫一扫