为什么滚动时将 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，则搜索具有类名主体的第一个元素。对于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}%)