fullPage / 单屏滚动

最新推荐文章于 2023-02-24 15:08:51 发布

前端萌新小菜鸟

最新推荐文章于 2023-02-24 15:08:51 发布

阅读量285

点赞数

分类专栏： HTML 文章标签： css js html

本文链接：https://blog.csdn.net/weixin_45045834/article/details/108518442

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

fullPage / 单屏滚动

非定时器版本

<!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;
        }
        body{
            overflow: hidden;
        }
        .box{
            position: relative;
            overflow: hidden;
            width: 100%;
            transition: all 1s;
        }
        .box div{
            width: 100%;
        }
        h1{
            text-align: center;
            color: white;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="box" style="top: 0%;left: 0;">
        <div class="box1" style="background: rgb(27, 188, 155);">
            <h1>第一屏</h1>
        </div>
        <div class="box2" style="background: rgb(75, 191, 195);">
            <h1>第二屏</h1>
        </div>
        <div class="box3" style="background: rgb(123, 170, 190);;">
            <h1>第三屏</h1>
        </div>
        <div class="box4" style="background: rgb(255, 153, 0);">
            <h1>第四屏</h1>
        </div>
    </div>
    <script>
        var body=document.getElementsByTagName('body')[0]
        var box=document.getElementsByClassName('box')[0]
        var ping=box.children
        body.style.height=window.innerHeight+'px'
        for(var i=0;i<ping.length;i++){
            ping[i].style.height=window.innerHeight+'px'
        }

        var timeId=setInterval(function(){
            var temp=true
            if(temp){
                document.onwheel=function(e){
                var top=tonumber(box.style.top)
                if(e.wheelDelta<0&&temp){
                    if(top!=='300%'){
                        box.style.top='-'+(parseInt(top)+100)+'%'
                        temp=false
                    }
                }else if(e.wheelDelta>0&&temp){
                    if(top!=='0%'){
                        box.style.top='-'+(parseInt(top)-100)+'%'
                        temp=false
                    }
                }
                }
            }
        },1000)

        function tonumber(str){
            if(str[0]=='-'){
                var st=str.slice(1)
            }else{
                st=str
            }
            return st
        }
    </script>
</body>
</html>

前端萌新小菜鸟

关注

0
点赞
踩
0

收藏

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

fullPage / 单屏滚动非定时器版本<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <style> *{
复制链接

扫一扫