为什么滚动工作时不将 div 淡化为黑色？

Question

我尝试使用 scrollY 和简单的查询选择器创建淡入黑色，但我终其一生都无法弄清楚为什么它可能无法正常工作？ 应该是把背景色hsl的l值降为0的简单案例，下面是我的代码：

const lightness = 100;
const body = document.querySelector('.body')

window.addEventListener('scroll', () => {
  const y = window.scrollY
  newLightness = (lightness - y/10)
  if (newLightness < 0) {
    newLightness = 0;
  }
  body.style.backgroundColor = `hsl(0, 0, ${newLightness})`
})

Answer 1

两个变化：

1. document.querySelector('body') ：如果您使用 .body，您正在搜索具有类名主体的 first 元素。对于 div/body/span 等标签，您可以简单地使用不带任何符号的标签名称。
2. 在hsl 中，饱和度和亮度以% 为单位；

let lightness = 100;
const body = document.querySelector('body')

window.addEventListener('scroll', () => {
  const y = window.scrollY
  let newLightness = (lightness - y/10) //Added the let keyword
  if (newLightness < 0) {
    newLightness = 0;
  }
  body.style.backgroundColor = `hsl(0, 0%, ${newLightness}%)`
})

此外，根据您的需要使用 let/var 等声明变量的好习惯。

Answer 2

你非常亲密。首先，我想说的是，当您的 querySelector 正在寻找课程时，请确保您的 body 标签上确实有 class="body"。其次，hsl()值中的第二个和第三个参数后面需要跟百分号...

body.style.backgroundColor = hsl(0, 0%, ${newLightness}%)