javascript - 如何在javascript中更改滚动条的背景颜色

Question

我正在本地主机上开发一个 WordPress 网站，并使用自定义 JavaScript 的插件脚本和样式。我想在滚动值更改时更改背景颜色，例如

滚动值 0-100，然后颜色为红色

滚动值 100-200 然后颜色为蓝色

滚动值 200-300 然后颜色为粉红色

滚动值 300-400 然后颜色为黑色

滚动值 400-500，然后颜色为橙色

通过这段代码，我只能在 javascript 的第一个条件中添加一个类。

.site-main{
background-color:green !important;
}
.scrolled1{
background-color:yellow !important;
}
.scrolled2{
background-color:pink !important;
}
.scrolled3{
background-color:black !important;
}
.scrolled4{
background-color:orange !important;
}
.scrolled5{
background-color:red !important;
}

<script>
alert("success");
window.onscroll = function() {myFunction()};

function myFunction() {
if((document.body.scrollTop > 0 || document.documentElement.scrollTop > 0) && (document.body.scrollTop < 100 || document.documentElement.scrollTop < 100)){

document.getElementById("main").className = "scrolled2";
    }

else if((document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) && (document.body.scrollTop < 200 || document.documentElement.scrollTop < 200)){

document.getElementById("main").className = "scrolled3";
    } 
  else {
        document.getElementById("main").className = "site-main";
    }
}
</script>

Answer 1

请检查一下。如果您需要在页面加载时使 #main 为绿色，只需将 .site-main 类添加到 html 中的 div 中即可。

window.onscroll = function() {myFunction()};

function myFunction() {
	var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  var elem = document.getElementById("main");
  
  if (scrollTop > 0 && scrollTop < 101) {
  	elem.className = "scrolled5";
  } else if (scrollTop > 100 && scrollTop < 201) {
  	elem.className = "scrolled6";
  } else if (scrollTop > 200 && scrollTop < 301) {
  	elem.className = "scrolled2";
  } else if (scrollTop > 300 && scrollTop < 401) {
  	elem.className = "scrolled3";
  } else if (scrollTop > 400 && scrollTop < 501) {
  	elem.className = "scrolled4";
  } else {
  	elem.className = "site-main";
  }
}

.site-main{
background-color:green !important;
}
.scrolled1{
background-color:yellow !important;
}
.scrolled2{
background-color:pink !important;
}
.scrolled3{
background-color:black !important;
}
.scrolled4{
background-color:orange !important;
}
.scrolled5{
background-color:red !important;
}
.scrolled6 {
  background-color: blue !important;
}

<div id="main" style="height: 10000px;"></div> <!-- temporary height -->