如何在使用window.pageYOffSet并切換大小寫以更改給定像素數的背景顏色時停止“導致”元素溢位？-有解無憂

目標是當我向下滾動時<body>，background-color每個500px.

我已經在整個互聯網上搜索，但還不明白發生了什么。請看一下代碼。但根據 Mozilla Firefox 瀏覽器，該body元素導致 an 元素溢位

如何在使用 window.pageYOffSet 并切換大小寫以更改給定像素數的背景顏色時停止“導致”元素溢位？

我試過overflow: hidden在 CSS selection 中使用body，也試過 with html，但滾動條就消失了。

我是初級水平的學習者。 它應該是正確的，因為它來自老師的編碼。感謝您的時間和幫助。更新：抄寫是我的錯誤。

所有的答案都解決了這個問題。謝謝你。

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CHALLENGES</title>
        <style>
        
            body {
                height: 3000px;
            };

            .one {
                background-color: beige;
                transition: all 3s;
            };

            .two {
                background-color: blueviolet;
                transition: all 3s;
            };

            .three {
                background-color: coral;
                transition: all 3s;
            };

            .four {
                background-color: cornflowerblue;
                transition: all 3s;
            };

            .five {
                background-color: darkgoldenrod;
                transition: all 3s;
            };
        </style>
    </head>
    <body class="one">
        
        <h1>Javascript Event Challenges: Challenge 29</h1>
        <p>Scroll Down!</p>

        <script>

            var pageTop;
            var bodyTag = document.querySelector("body");

            window.addEventListener("scroll", function(){

                pageTop = window.pageYOffSet;

                switch(true) {
                    case pageTop < 500: bodyTag.className = "one"; break;
                    case pageTop < 1000: bodyTag.className = "two"; break;
                    case pageTop < 1500: bodyTag.className = "three"; break;
                    case pageTop < 2000: bodyTag.className = "four"; break;
                    default: bodyTag.className = "five";
                }
            });

        </script>
    </body>
</html>

uj5u.com熱心網友回復：

由于 'Offset' 中的拼寫錯誤，此行無法正常運行：

pageTop = window.pageYOffSet;

它應該是

pageTop = window.pageYOffset;

它只回傳未定義的。由于 'pageYOffSet' 也是 'scrollY' 的別名，您可以使用它來代替：

 pageTop = window.scrollY;

顏色不起作用，因為您使用的是“;” 在每個 CSS 查詢的末尾。也洗掉它們，它會起作用。

uj5u.com熱心網友回復：

window.pageYOffSet應該是window.pageYOffset。
洗掉元素中 CSS 類之后的所有分號，<style>因為它們在語法上無效。

uj5u.com熱心網友回復：

在這里測驗

嘗試設定pageTop = window.scrollY;

也;從css代碼中洗掉

var pageTop;
var bodyTag = document.querySelector("body");
window.addEventListener("scroll", function(e){
    pageTop = window.scrollY;
    switch(true) {
        case pageTop < 500: bodyTag.className = "one"; break;
        case pageTop < 1000: bodyTag.className = "two"; break;
        case pageTop < 1500: bodyTag.className = "three"; break;
        case pageTop < 2000: bodyTag.className = "four"; break;
        default: bodyTag.className = "five";
    }
});

body {
    height: 3000px;
    display:block;
}

.one {
    background-color: beige;
    transition: all 3s;
}

.two {
    background-color: blueviolet;
    transition: all 3s;
}

.three {
    background-color: coral;
    transition: all 3s;
}

.four {
    background-color: cornflowerblue;
    transition: all 3s;
}

.five {
    background-color: darkgoldenrod;
    transition: all 3s;
}

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CHALLENGES</title>
    </head>
    <body class="one">
        
        <h1>Javascript Event Challenges: Challenge 29</h1>
        <p>Scroll Down!</p>
    </body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/506758.html

標籤：javascript html css

上一篇：笑話：顯式Promise與異步測驗的作業方式不同

下一篇：無法通過SeleniumWebdriver甚至JavascriptExecutor滾動網頁