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 = y <0吗？ -y：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>

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

2 个答案: