Элемент не меняет цвет при прокрутке назад в верхней части страницы

#javascript #html #css

Вопрос:

вот скрипка, которую я хочу изменить цвет элемента «@» на странице после прокрутки панели навигации.

Это работает, но только когда я прокручиваю страницу вниз.

Когда я прокручиваю верхнюю часть страницы, это не работает. В результате @ остается красного цвета, когда ожидается, что он будет белым.

 window.addEventListener("scroll", (event) => {
    if (!document.querySelector('.container')) return;
    let container = document.querySelector('.container');

    if (container.scrollHeight - container.scrollTop === container.clientHeight) {
        document.querySelector('.chat-icon').style.color = "red";
    } else
        document.querySelector('.chat-icon').style.color = "white";
});

P.S. белый элемент относится к классу «контейнер», а фиолетовый-панель навигации.

1. вы используете ReactJS?

2. Однако ваш код выглядит нормально. Не могли бы вы привести простой пример в jsfiddle или где-нибудь еще? Было бы проще увидеть это в действии (включая вашу разметку, кстати).

3. @Aer0 Теперь вы можете взглянуть на пример (ссылка указана в вопросе).

Ответ №1:

это было бы связано с тем, что div нельзя прокрутить, а переменная container.scrollTop возвращает 0 документов mozzila

Если элемент нельзя прокрутить (например, у него нет переполнения или если элемент имеет свойство «не прокручиваемый»), значение 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";
});

вот рабочий пример