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 color并更改第一个值。我使用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%)'});
}

另外，如果您需要调整色调，只需使用最后两个参数

滚动时条形颜色的变化

1 个答案: