我试图让页面的背景颜色在用户滚动时在黑色和白色之间的渐变上发生变化。如果有意义，颜色将取决于用户当前在页面上滚动到的位置？这是我已经拥有的一些代码，但是唯一的问题是当用户没有滚动到任何地方时，网页不是黑色的。
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);
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<body onscroll="scroll()">
<script src="assets/JS/ScrollEffect.js"></script>
</body>
</html>最佳答案
是这样的吗？
$(window).on('scroll', function(){
var s = $(window).scrollTop(),
d = $(document).height(),
c = $(window).height();
var scrolledArea = (s / (d - c));
$("div").css("opacity", scrolledArea);
})body{
margin: 0;
}
div{
height: 500vh;
background: #000;
opacity: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
</div>关于javascript - 在用户滚动时沿渐变更改背景颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50169061/