滚动时改变条形图的颜色

Question

在滚动时，我需要添加条形图的颜色:当加载页面时，条形图应该是绿色的，在使用滚动时，使用红色的填充颜色。

这可以简单地在原生javascript上完成吗？

Answer 1

尝尝这个

var scrollTimeout;
window.onscroll = function() {
  clearTimeout(scrollTimeout);
    svg.selectAll(".bar").style('fill', 'red');
    scrollTimeout = setTimeout(function() {
       svg.selectAll(".bar").style('fill', 'steelblue');
    }, 500);
}

好的。因此，要动态更改颜色，可以使用HSL颜色并更改第一个值。我使用从红色到绿色的0-125句号.

var scrollHeight = document.body.scrollHeight - window.innerHeight;
window.onscroll = function() {
    var color = 125 - 125 / scrollHeight * window.pageYOffset;
    svg.selectAll(".bar").style('fill', function(){return 'hsl('+color+', 100%, 50%)'});
}

另外，如果你需要调色，只需播放最后两个参数即可。