通过滚动Javascript更改CSS背景渐变

Question

我正在尝试通过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))`)
});

任何输入都表示感谢！

Answer 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))`;

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

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

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

Answer 2

Y通常小于0。我将y添加到console.log（）进行调试。Y通常是1，因为此y = y < 1 ? 1 : y。我认为您应该执行y = y < 1 ? -y : y使其始终为正，但并非始终为1。

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 ? -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(`linear-gradient(rgb(${r}, ${g}, ${b}), rgb(255,0,0)) Y=${y}`)
});

它起作用：https://jsfiddle.net/rsufg37c/。

也Semilicon是一个问题，就像在预览答案中一样