javascript if语句和wheel事件

我试图创建一个单页滚动网站,其中窗口内的每个部分都由wheel事件控制,但是javascript部分似乎无法正确执行,可能是因为我创建了一个嵌套的if语句。请告诉我我的代码中的问题是否可以正常运行,以及是否可以通过创建变量或使用javascript的其他功能(没有库或插件)来建议可能的技巧和技巧,以使js代码更简洁些。请只使用纯JavaScript

<!DOCTYPE html>

<html>
    <head>
        <title></title>
        <style>
            html, body {
                margin: 0;
                padding: 0;
                overflow: hidden;
                user-select: none;
            }

                #first-section {
                    position: absolute;
                    top: 0;
                    right: 0;
                    left: 0;
                    width: 100vw;
                    height: 100vh;
                    background-color: black;
                }
                    #myVideo {
                        position: fixed;
                        right: 0;
                        bottom: 0;
                        min-width: 100%;
                        min-height: 100%;
                    }

                #services, #about-us, #products-store {
                    position: absolute;
                    top: 100vh;
                    right: 0;
                    left: 0;
                    width: 100vw;
                    height: 100vh;
                }
                    #arch {
                        background-color: red;
                        z-index: 1;
                    }
                    #interior {
                        background-color: green;
                        z-index: -1;
                    }
                    #product {
                        background-color: blue;
                        z-index: -1;
                    }
                    #about-us {
                        background-color: yellow;
                    }
                    #products-store {
                        background-color: deeppink;
                    }

                #footer {
                    position: absolute;
                    top: 33vh;
                    right: 0;
                    left: 0;
                    width: 100%;
                    height: 67vh;
                    background-color: black;
                    z-index: -1;
                }
                    #call-to-action-footer {
                    position: absolute;
                    top: -16vh;
                    left: 16vh;
                    right: 16vh;
                    width: auto;
                    height: 50vh;
                    background-color: red;
                    }

        </style>
        <script>
            window.addEventListener("wheel", event => {
                const delta = Math.sign(event.deltaY);
                console.info(delta);

                if (delta > 0) {
                    if (document.getElementById("services").style.top == "100vh") {
                        document.getElementById("first-section").style.top = "-100vh";
                        document.getElementById("services").style.top = "0px";
                    }
                    else if (document.getElementById("services").style.top == "0px") {
                        if (document.getElementById("arch").style.zIndex == "1") {
                            document.getElementById("interior").style.zIndex = "2";
                        }
                        else if (document.getElementById("interior").style.zIndex == "2") {
                            document.getElementById("product").style.zIndex = "3";
                        }
                        else if (document.getElementById("product").style.zIndex == "3") {
                            document.getElementById("services").style.top = "-100vh";
                            document.getElementById("about-us").style.top = "0px";
                        }
                    }
                    else if (document.getElementById("products-store").style.top == "100vh") {
                        document.getElementById("about-us").style.top = "-100vh";
                        document.getElementById("products-store").style.top = "0px";
                    }
                    else if (document.getElementById("products-store").style.top == "0px") {
                        document.getElementById("products-store").style.top = "-67vh";
                    }
                }
                else if (delta < 0) {
                    if (document.getElementById("products-store").style.top == "-67vh") {
                        document.getElementById("products-store").style.top = "0px";
                    }
                    else if (document.getElementById("about-us").style.top == "-100vh") {
                        document.getElementById("about-us").style.top = "0px";
                        document.getElementById("products-store").style.top = "100vh";
                    }
                    else if (document.getElementById("services").style.top == "-100vh") {
                        document.getElementById("services").style.top = "0px";
                    }
                    else if (document.getElementById("services").style.top == "0px") {
                        if (document.getElementById("product").style.zIndex == "3") {
                            document.getElementById("product").style.zIndex == "-1";
                        }
                        else if (document.getElementById("interior").style.zIndex == "2") {
                            document.getElementById("interior").style.zIndex = "-1";
                        }
                        else if (document.getElementById("arch").style.zIndex == "1") {
                            document.getElementById("services").style.top = "100vh";
                        }
                    }
                }
            });
        </script>
    </head>
    <body>
        <main>
            <section id="first-section">
                <video autoplay muted loop id="myVideo">
                    <source src="rain.mp4" type="video/mp4">
                </video>
            </section>
            <section id="services">
                <div id="arch">
                    <div id="arch-categories">
                        <div id="arch-residencial"></div>
                        <div id="arch-commercial"></div>
                        <div id="arch-hospitality"></div>
                    </div>
                </div>
                <div id="interior">
                    <div id="interior-categories">
                        <div id="interior-residencial"></div>
                        <div id="interior-commercial"></div>
                        <div id="interior-hospitality"></div>
                    </div>
                </div>
                <div id="product">
                    <div id="product-categories">
                        <div id="category-1"></div>
                        <div id="category-2"></div>
                        <div id="category-3"></div>
                    </div>
                </div>
            </section>
            <section id="about-us">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </section>
            <section id="products-store"></section>
            <footer id="footer">
                <div id="call-to-action-footer"></div>
            </footer>
        </main>
    </body>
</html>
评论