Javascript 元素没有'；当滚动回到页面顶部时，不要改变颜色

我想在滚动导航栏后更改页面上“@”元素的颜色

它工作，但只有当我向下滚动

当我在页面顶部滚动时，它不工作。因此，@在预期为白色时保持红色

---

p.S.白色元素是“container”类的元素，紫色元素是导航栏。

这可能是因为无法滚动div，变量container.scrollTop返回0

如果该元素无法滚动（例如，它没有溢出，或者该元素的属性为“不可滚动”），scrollTop为0

相反，您可以使用window.scrollY

window.addEventListener("scroll", (event) => {
let container = document.querySelector('.nav');
if (container.scrollHeight - window.scrollY === container.clientHeight) {
    document.querySelector('.chat-icon').style.color = "red";
} else
    document.querySelector('.chat-icon').style.color = "white";
});

---

您正在使用reactJS吗？不过您的代码看起来不错。介意在JSFIDLE或其他地方提供一个简单的示例吗？将更容易看到它的作用（包括您的标记btw）。@Aer0您现在可以查看一个示例（问题中提供了链接）。谢谢！这绝对是一个原因。现在它工作得很好。

window.addEventListener("scroll", (event) => {
let container = document.querySelector('.nav');
if (container.scrollHeight - window.scrollY === container.clientHeight) {
    document.querySelector('.chat-icon').style.color = "red";
} else
    document.querySelector('.chat-icon').style.color = "white";
});