實現鼠標滾輪滾動一屏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> 鼠標滾動一屏-JavaScript </title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            html,body{
                width: 100vw;
                height: 100vh;
                text-align: center;
                font-size: 100px;
                overflow: hidden;
            }
            .box{
                width: 100vw;
                height: 500vh;
                position: relative;
                top: 0;
                left: 0;
            }
            .box div{
                width: 100vw;
                height: 100vh;
            }
            .box div.item1{
                background: red;
            }
            .box div.item2{
                background: yellow;
            }
            .box div.item3{
                background: gold;
            }
            .box div.item4{
                background: green;
            }
            .box div.item5{
                background: blue;
            }
            #list{
                width: 50px;
                height: 250px;
                position: absolute;
                top: 50%;
                right: 20px;
                margin-top: -125px;
                font-size: 35px;
            }
            #list li{
                width: 50px;
                height: 50px;
                list-style: none;
                line-height: 50px;
                text-align: center;
                background-color: #E3E3E3;
            }
            #list li.active{
                color: #FFF;
                font-weight: 900;
                background: greenyellow;
            }
        </style>
    </head>
    <body>
        <div class="box" id="box">
            <div class="item1">屏幕01</div>
            <div class="item2">屏幕02</div>
            <div class="item3">屏幕03</div>
            <div class="item4">屏幕04</div>
            <div class="item5">屏幕05</div>
        </div>
        <ul id="list">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <script type="text/javascript">
            var oBox = document.getElementById("box");
            var oList = document.getElementById("list");
            var oLi = oList.getElementsByTagName("li");
//        var oLi = document.querySelectorAll("#list li");
            
            function on( obj,eventName,fn ){
                if( obj.addEventListener ){
                    obj.addEventListener(eventName,fn);
                }else{
                    obj.attachEvent(eventName,fn);
                };
            };
            
            function handler(ev){
                var num = 0;
                var ev = window.event || ev;
                if( ev.wheelDelta == -120 || ev.detail == 3 ){
                    num ++;
                    if( num > 4 ){
                        num = 4;
                    };
                }else{
                    num --;
                    if( num < 0 ){
                        num = 0;
                    };
                };
                oBox.style.top = -num * 100 + "vh";
                for( var i = 0,len = oLi.length;i < len;i ++ ){
                    oLi[i].className = '';
                }
                oLi[num].className = 'active';
            };
            
            on( document,'mousewheel',handler );
            on( document,'DOMMouseScroll',handler );
            
        </script>
    </body>
</html>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容