實(shí)現(xiàn)鼠標(biāo)滾輪滾動(dòng)一屏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> 鼠標(biāo)滾動(dòng)一屏-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>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容