Javascript 更改滚动条上的背景色_Javascript_Css_Arrays_Animation

Javascript 更改滚动条上的背景色

javascript css arrays animation

Javascript 更改滚动条上的背景色,javascript,css,arrays,animation,Javascript,Css,Arrays,Animation,因此，我尝试编写自己的代码版本来更改滚动页面的背景颜色。我已经在互联网上搜索过了，但我一直在寻找Jquery示例，而没有一个普通的JS示例真正告诉我如何做我的第一个想法是在css中处理颜色和动画，并在JS中触发它们。如果我想在CSS中处理动画，这是一种方法，不是吗？无论如何，我的代码显然不起作用，所以有人能帮我吗它可能没有应有的效率，所以任何提示都会很有帮助我还没有完成css中的动画部分，但是基础工作已经准备好了。所以我的想法是选择所有不同的颜色，然后将它们放入一个数组中。然后在函数内部做

因此，我尝试编写自己的代码版本来更改滚动页面的背景颜色。我已经在互联网上搜索过了，但我一直在寻找Jquery示例，而没有一个普通的JS示例真正告诉我如何做

我的第一个想法是在css中处理颜色和动画，并在JS中触发它们。如果我想在CSS中处理动画，这是一种方法，不是吗？无论如何，我的代码显然不起作用，所以有人能帮我吗

它可能没有应有的效率，所以任何提示都会很有帮助

我还没有完成css中的动画部分，但是基础工作已经准备好了。所以我的想法是选择所有不同的颜色，然后将它们放入一个数组中。然后在函数内部做一个for循环

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css\style.css">
    <title>Site experiment</title>
</head>
<body>

<section>
<h1 id="first-h1">This site is an experiment on scroll effects</h1>
</section>

<section>
<h1 id="second-h1">I really hope this helps me learn vanilla JavaScript better</h1>
</section>

<section>
<h1 id="third-h1">I think it will honestly</h1>
</section>

<section>
<h1 id="fourth-h1">Or maybe it will frustrate me till the end of time</h1>
</section>

<section>
<h1 id="fifth-h1">Even if that does happen, I'll still keep trying</h1>
</section>

</body>
<script src="js\app.js"></script>
</html>

@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto Mono', monospace;
}

body {
    background-color: #E5E1EE;
    transition: 0.3s all;
}

section {
    height: 100vh;
}

h1 {
    margin: 15rem;
}

.lightCyan {
    background-color: #DFFDFF;
}

.darkSkyBlue {
    background-color: #90BEDE;
}

.aquamarine {
    background-color: #68EDC6;
}

.electricBlue {
    background-color: #90F3FF;
}

    let bdy = document.querySelector('body');
let cyan = bdy.classList.add('lightCyan');
let skyBlue = bdy.classList.add('darkSkyBlue');
let aqua = bdy.classList.add('aquamarine');
let electric = bdy.classList.add('electricBlue');
let colors = [cyan, skyBlue, aqua, electric];


window.addEventListener('scroll', function () {
    if (document.documentElement.scrollTop || document.body.scrollTop > window.innerHeight) {
        for(let i = 0; i < colors.length; i++) {
           colors.push(i);
        }
    }
})


现场试验
这个网站是一个关于滚动效果的实验
我真的希望这能帮助我更好地学习
老实说，我想会的
也许这会让我一直沮丧到时间的尽头
即使这样，我还是会继续努力
@导入url（'https://fonts.googleapis.com/css?family=Roboto+单体'；
* {
保证金：0；
填充：0；
框大小：边框框；
字体系列：“Roboto Mono”，monospace；
}
身体{
背景色：#E5E1EE；
过渡：0.3s全部；
}
部分{
高度：100vh；
}
h1{
保证金：15雷姆；
}
.淡青色{
背景色：#DFFDFF；
}
深蓝色{
背景色：#90BEDE；
}
.海蓝宝石{
背景色：#68EDC6；
}
.电蓝{
背景色：#90F3FF；
}
设bdy=document.querySelector（'body'）；
让cyan=bdy.classList.add（'lightCyan'）；
让skyBlue=bdy.classList.add（'darkSkyBlue'）；
让aqua=bdy.classList.add（'aquamarine'）；
让electric=bdy.classList.add（'electricBlue'）；
让颜色=[青色，天蓝色，水绿色，电]；
window.addEventListener（'scroll'，函数（）{
if（document.documentElement.scrollTop | | document.body.scrollTop>window.innerHeight）{
for（设i=0；i

您只需使用一个简单的颜色数组即可

让bdy=document.querySelector（'body'）；
让颜色=[‘浅绿色’、‘西红柿’、‘橙色’、‘紫色’]；
window.addEventListener（'scroll'，函数（）{
if（document.documentElement.scrollTop | | window.pageYOffset>window.innerHeight）{
var diff=parseInt（window.pageYOffset-window.innerHeight）；
var step=parseInt（window.innerHeight*2）；
bdy.style.backgroundColor=颜色[数学地板（差异/步骤）]；
}
})

*{
保证金：0；
填充：0；
框大小：边框框；
字体系列：“Roboto Mono”，monospace；
}
身体{
背景色：#E5E1EE；
过渡：0.3s全部；
}
部分{
高度：100vh；
}
h1{
保证金：15雷姆；
}
.淡青色{
背景色：#DFFDFF；
}
深蓝色{
背景色：#90BEDE；
}
.海蓝宝石{
背景色：#68EDC6；
}
.电蓝{
背景色：#90F3FF；
}


这个网站是一个关于滚动效果的实验
我真的希望这能帮助我更好地学习
老实说，我想会的
也许这会让我一直沮丧到时间的尽头
即使这样，我还是会继续努力

如果您想在给定部分点击屏幕顶部时更改背景色，可以尝试以下操作：

const colors=[''，'lightCyan'，'darkSkyBlue'，'aquamarine'，'electricBlue']
const sections=[…document.getElementsByTagName（'section'）]
window.addEventListener（'scroll'，函数（）{
const scrollFromTop=window.pageYOffset
for（设i=0；sections.length>i；i++）{
if（scrollFromTop）因此我尝试了这个方法，但在第一次颜色更改后它就停止工作了。另外，当从下到上滚动时，这会使它工作吗？@eddiepearson我添加了CSS和HTML，所以你可以在这里运行代码，它在任何方向都工作。啊，非常感谢！这太棒了。“中断”是什么意思做什么？这是一些内置函数吗？还有，“…”在节数组中做什么？“…文档”等等。我可以使用“querySelectorAll”吗？@eddiepearsonbreak
语句终止当前循环。您可以在此处了解它：它在此处的作用是，一旦程序找到未到达屏幕顶部的第一个部分，就终止循环。如果您忽略break，请查看会发生什么：它一路循环，因此我们总是以最后一种颜色结束。您好。为什么要添加if语句？当您位于窗口顶部时，这两个条件都是错误的。此外，您的解决方案与视口高度不匹配。请尝试使用更大的高度。@mootookoi如果这两个条件都是错误的，则bg颜色不会改变-我遵循了这个逻辑。我没有尝试适应高度，因为它不是一个plac我只是就如何解决这个问题给出了一个方向