原生JS实现全屏滚动（无滚动条）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>原生JS实现全屏滚动（无滚动条）</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                font-size: 0;
            }

            .box {
                position: relative;
                width: 100%;
                height: 100vh;
                overflow: hidden;
            }
            .box-con {
                position: relative;
                top: 0;
            }
            .box-con-cont {
                width: 100%;
                height: 100vh;
                font-size: 30px;
                position: relative;
                display: flex;
                justify-content: center;
                text-align: center;
            }
            .box .carousel{
                z-index: 1;
                position: fixed;
                top: 50%;
                right: 0;
                transform: translateY(-50%);
                height: 100px;
                width: 20px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-between;
            }
            .box .carousel .carousel-con{
                display: block;
                width: 10px;
                height: 10px;
                background:black;
                border-radius: 50%;
                cursor: pointer;
            }
            .box .carousel .active{
                background: white !important;
                width: 15px;
                height: 15px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="box-con">
                <div class="box-con-cont" style="background-color: yellowgreen;">一页面</div>
                <div class="box-con-cont" style="background-color: red;">二页面</div>
                <div class="box-con-cont" style="background-color: skyblue;">三页面</div>
                <div class="box-con-cont" style="background-color: yellow;">四页面</div>
            </div>
            <!-- 导航轮播效果 -->
            <div class="carousel">
                <span class="carousel-con active"></span>
                <span class="carousel-con"></span>
                <span class="carousel-con"></span>
                <span class="carousel-con"></span>
            </div>
        </div>
        <script type="text/javascript">
            let isRrue = true;//控制滑动是否进入滚动
            let serialNumber = 0;//序号
            var oUl = document.getElementsByClassName("box-con")[0];
            let con = document.getElementsByClassName("carousel-con");
            //鼠标滚轮事件
            document.addEventListener('mousewheel', function(ev) {
                var ev = window.event || ev;
                 
                if (isRrue) {
                    //向下滚动
                    if (ev.wheelDelta < 0 && serialNumber<3) {
                        serialNumber++;
                    }
                    ////向上滚动
                    if (ev.wheelDelta > 0 && serialNumber>0) {
                        serialNumber--;
                    }
                    isRrue = false;
                    oUl.style.transition="all 1s ease";
                    oUl.style.top = -serialNumber*100 + 'vh';
                    
                    carousel(serialNumber);//执行轮播导航效果 传参
                    
                    //设置延时防止一次性滚动多个页面
                    setTimeout(function() {
                        isRrue = true;
                    }, 1000);
                }
            });
            
            //轮播导航效果
            function carousel(number){
                for (var i = 0; i < con.length; i++) {
                    con[i].className="carousel-con";
                }
                con[number].className="carousel-con active";
            }
            carousel(0);
            
            //点击页面翻滚
            for (var j = 0; j < con.length; j++) {
                (function(j){
                    con[j].addEventListener("click",function(){
                        serialNumber=j;//更改序号值
                        oUl.style.transition="all 1s ease";
                        oUl.style.top = -serialNumber*100 + 'vh';
                        carousel(serialNumber);
                    })
                }(j))
            }
        </script>
    </body>
</html>
原生JS实现全屏滚动（无滚动条）

推荐阅读更多精彩内容
