Question

我对JavaScript很新，但我确实理解HTML和CSS（在学习JavaScript的过程中）。我需要能够根据用户滚动到的位置设置页面的背景颜色。它将是黑色 - >白色之间渐变的颜色。

Answer 1

“守则”有效，但不在本网站上，因为它没有检测到正文的.scrollTop 玩得开心!!!

function scroll(){
	var body = document.body,
		  html = document.documentElement;
	var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
	var color = Math.round(((body.scrollTop + html.offsetHeight) / height) * 255);
	body.style.backgroundColor = "rgb("+color+","+color+","+color+")";
}

html{
	height: 100%;
}
body{
	height: 200%;
	background: rgb(126,126,126);
}

<html>
	<head>
	</head>
	<body onscroll="scroll()">
	</body>
</html>

Answer 2

以下是我正在使用的内容：

window.onscroll = function() {scrollFunction()} ;
function scrollFunction() {
// After scrolling down "number"px, the background-color changes
    if(document.body.scrollTop >=300 || document.documentElement.scrollTop >= 300){
        document.getElementsByTagName("body")[0].style.backgroundColor = "blue";
    }
	else if (document.body.scrollTop >= 100 || document.documentElement.scrollTop >= 100) {
        document.getElementsByTagName("body")[0].style.backgroundColor = "red";
    } 
	
	else{
		document.getElementsByTagName("body")[0].style.backgroundColor = "black";
	}
}

body{
	background-color:black;
	color:white;
}

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br><br><br><br><br><br><br><br><br><br><br><br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br><br><br><br><br><br><br><br><br><br><br><br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br><br><br><br><br><br><br><br><br><br><br><br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br><br><br><br><br><br><br><br><br><br><br><br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br><br><br><br><br><br><br><br><br><br><br><br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br><br><br><br><br><br><br><br><br><br><br><br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br><br><br><br><br><br><br><br><br><br><br><br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br><br><br><br><br><br><br><br><br><br><br><br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br><br><br><br><br><br><br><br><br><br><br><br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br><br><br><br><br><br><br><br><br><br><br><br>

如何根据用户在其上的位置设置网页的颜色？

2 个答案: