CSS & Javascript：更改滚动时的背景颜色
下面的示例向您展示了如何在用户向下滚动时动态更改网页的背景颜色。我们只使用 CSS 和 vanilla Javascript 来制作它。
示例预览
完整代码
<!doctype html>
<html>
<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">
<title>KindaCode.com</title>
<style>
* {
box-sizing: border-box
}
body {
height: 1000vh;
transition: background 1s ease;
}
.content {
padding: 50px;
color: white;
text-align: center;
}
</style>
</head>
<body>
<div class="content">
<h1>Welcome to KindaCode.com</h1>
</div>
<script>
var body = document.getElementsByTagName('body')[0];
body.style.backgroundColor = 'green';
// trigger this function every time the user scrolls
window.onscroll = function (event) {
var scroll = window.pageYOffset;
if (scroll < 300) {
// green
body.style.backgroundColor = 'green';
} else if (scroll >= 300 && scroll < 600) {
// yellow
body.style.backgroundColor = 'yellow';
} else if (scroll >= 600 && scroll < 1200) {
// blue
body.style.backgroundColor = 'blue';
} else if (scroll >= 1200 && scroll < 1800) {
// orange
body.style.backgroundColor = 'orange';
} else if (scroll >= 1800 && scroll < 3000) {
// red
body.style.backgroundColor = 'red';
} else {
// purple
body.style.backgroundColor = 'purple';
}
}
</script>
</body>
</html>
解释
每次用户向上或向下滚动时，我们都会调用一个可以操作背景颜色的函数：
window.onscroll = function (event) {
// other code here
}
为了计算滚动距离，我们使用这个：
var scroll = window.pageYOffset;
要以编程方式设置背景颜色，我们使用以下 Javascript 代码：
body.style.backgroundColor = 'green';
为了使颜色过渡平滑，我们添加了这个 CSS 行：
transition: background 1s ease;声明：本站所有文章，如无特殊说明或标注，均为本站原创发布，任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站。本站所有源码与软件均为原作者提供，仅供学习和研究使用。如您对本站的相关版权有任何异议，或者认为侵犯了您的合法权益，请及时通知我们处理。
