滚动时更改背景颜色
Posted
技术标签:
【中文标题】滚动时更改背景颜色【英文标题】：Change Background-color on scroll 【发布时间】：2013-05-26 12:48:15 【问题描述】：我想创建一个类似于下一页http://readymag.com/ 上的效果，其中背景颜色会根据滚动位置而变化，但不知道如何去做，我无法理解他们的代码。
我见过一些从一种颜色变为另一种颜色的示例，但我不确定如何使用多种颜色来做到这一点。 （我希望能够指定每种颜色）
任何帮助将不胜感激。
迈克尔。
【问题讨论】：
你了解sin和cos吗？你知道颜色的十六进制表示仍然只是一个整数吗？根据这两个概念，您可以在您选择的任何步骤中无休止地旋转颜色。
此外，这是为了帮助有特定问题的人，而不是做他们的工作......
我没有要求任何人做任何工作，我正在寻找的只是学习资源，我可以达到预期的效果，因为我有点迷茫，要求不多。
备用solution
【参考方案1】：
这是一个简单的方法：
HTML
<body onscroll="scroll()">
...
</body>
JavaScript
// HSL Colors
var colors = [
[0, 100, 50],
[113, 75, 25],
[240, 87, 40],
[328, 24, 40]
],
el = document.getElementsByTagName('body')[0], // Element to be scrolled
length = colors.length, // Number of colors
height = Math.round(el.offsetHeight / length); // Height of the segment between two colors
function scroll()
var i = Math.floor(el.scrollTop / height), // Start color index
d = el.scrollTop % height / height, // Which part of the segment between start color and end color is passed
c1 = colors[i], // Start color
c2 = colors[(i+1)%length], // End color
h = c1[0] + Math.round((c2[0] - c1[0]) * d),
s = c1[1] + Math.round((c2[1] - c1[1]) * d),
l = c1[2] + Math.round((c2[2] - c1[2]) * d);
el.style['background-color'] = ['hsl(', h, ', ', s+'%, ', l, '%)'].join('');
工作示例：http://jsbin.com/elolud/2/edit
【讨论】：
感谢您回复我，瓦迪姆。不错的方法，尽管我注意到这似乎很随机，在色调中循环，关于如何更好地控制颜色的任何建议？ @MichaelBole 我已经用脚本更新了帖子，使用同样的方法可以让你控制颜色 哇，太完美了，也感谢 cmets，帮助我更好地理解，因为我是新手！ 在尝试实施时遇到了一些问题。控制台显示： Uncaught TypeError: Cannot read property 'scrollTop' of undefined Uncaught TypeError: Cannot read property 'offsetHeight' of undefined 似乎是我认为的顺序，现在工作得很好。以上是关于滚动时更改背景颜色的主要内容，如果未能解决你的问题，请参考以下文章