在滚动时通过 Javascript 更改 CSS 背景渐变答案

【问题标题】：Change CSS background gradient via Javascript on scroll在滚动时通过 Javascript 更改 CSS 背景渐变
【发布时间】：2020-06-12 13:38:09
【问题描述】：

我正在尝试通过 Javascript 更改渐变的两种背景颜色之一。颜色取决于滚动。不知何故，单一颜色有效，但渐变无效。

const [red, green, blue] = [0, 200, 0];
const hasGradient = document.querySelector('.has-gradient');

window.addEventListener('scroll', () => {
  let y = 1 + (window.scrollY || window.pageYOffset) / 150;
  y = y < 1 ? 1 : y
  const [r, g, b] = [red/y, green/y, blue/y].map(Math.round);
  hasGradient.style.background = `linear-gradient(rgb(${r}, ${g}, ${b}), rgb(255,0,0));`;
  console.log(`linear-gradient(rgb(${r}, ${g}, ${b}), rgb(255,0,0))`)
});

感谢任何输入！

【问题讨论】：

标签： javascript scroll gradient background-color addeventlistener

【解决方案1】：

您在字符串中使用了;。

  hasGradient.style.background = `linear-gradient(rgb(${r}, ${g}, ${b}), rgb(255,0,0));`;

应该是：

  hasGradient.style.background = `linear-gradient(rgb(${r}, ${g}, ${b}), rgb(255,0,0))`;

注意：无法通过将字符串分配给样式属性来设置样式，例如element.style = "颜色：红色；"。要设置元素的样式，请将“CSS”属性附加到样式并指定一个值

参考：https://www.w3schools.com/jsref/prop_html_style.asp

演示：https://jsfiddle.net/faod18mL/

【讨论】：

谢谢，我不知道我不需要';'我试试看！
谢谢，它成功了。您对我如何调整代码以使其从一种颜色变为另一种颜色而不是从一种颜色变为黑色有任何提示吗？可能是这样的：`if(red/150 == 50) {//stop add to red here} ?

【解决方案2】：

Y 通常是

const [red, green, blue] = [0, 255, 0];
const hasGradient = document.querySelector('.has-gradient');
hasGradient.style.background = `rgb(${red},${green},${blue})`

window.addEventListener('scroll', () => {
  let y = 1 - (window.scrollY || window.pageYOffset) / 150;
  y = y < 0 ? -y : y
  const [r, g, b] = [red/y, green/y, blue/y].map(Math.round);
  hasGradient.style.background = `linear-gradient(rgb(${r}, ${g}, ${b}), rgb(255,0,0))`;
  console.log(y)
  console.log(`linear-gradient(rgb(${r}, ${g}, ${b}), rgb(255,0,0))`)
});

div {
  height: 7000px;
  width: 500px;
}

<div class="has-gradient">

</div>

【讨论】：

感谢您的提示！不幸的是，它出现了故障
如何从蓝色变为红色？我尝试更改 RGB，但不起作用..
@FilipeOS 我将const [red, green, blue] = [0, 200, 0]; 更改为const [red, green, blue] = [0, 0, 200];，效果很好。请注意，我在滚动开始时编辑了我的答案以修复故障效果
我将第一个更改为自定义蓝色，将第二个更改为自定义粉红色，它不知道。粉红色保持粉红色，蓝色变为黑色。应该是整个蓝色，滚动时从蓝色变为粉红色