Как задействовать CSS в зависимости от значения scrollTop (pageYOffset)?

Question

[Spaceoddity]

Суть такая: страница состоит из нескольких экранов, контрастных между собой по цвету. И есть фиксированный хэдер. Так вот этот хэдер должен менять свою цветовую гамму в зависимости от того, какой экран сейчас виден.

Вначале придумал вариант со скроллингом по странице только по экранам. Т.е. отслеживаем событие scroll через функцию дебаунсинга с небольшой задержкой (чтобы определить направление скролла) и программно докручиваем страницу до начала следующего экрана. Таким образом можно просто брать значение класса для хэдера из data-атрибутов экрана до которого прошла прокрутка. Работает. И в принципе на этом можно остановиться. Но как по мне - это крайне паршивый вариант "user expirience". Скролл получается наглухо дискретным, т.е. пользователь в случае чего (например в окне браузера очень небольшой высоты) даже не сможет прокрутить какой-то экран, чтобы увидеть контент этого экрана, не влезший в окно браузера. Да и в принципе - подменять нативные события какой-то эмуляцией в угоду дизайну... Плюс есть ещё такие клавиши как "Home" и "End" (я лично очень люблю с помощью них прокручивать длинные "простыни"), которые оказываются бесполезны.

Сейчас в голове крутится вариант с просто определением координат остановки скролла (через тот же debouncing), поиском ближайшего экрана и навешиванием соответствующего класса. Но тут меня смущает пара моментов:
1. Во время длинных прокруток (через те же "Home"/"End") хэдер будет в изначальной цветовой гамме (начало события scroll ведь не отследить). Это, допустим, можно решить если чекать положение скролла не через debouncing, а через requestAnimationFrame. Но это же какие-то слишком тяжелые вычисления получатся.
2. Как соотносить положение скролла с координатами экранов?После загрузки страницы сразу вбить координаты всех экранов в массив и потом сверяться с ним?

Может у кого есть какие идеи по реализации подобного?
P.S. mix-blend-mode тут не вариант.

Answer 1

[Flying]

Подобная функциональность - идеальный кейс для использования IntersectionObserver. Добавляете observer на элементы, соответствующие вашим экранам, определяете пороговое значение срабатывания - и дальше просто реагируете на события переходов между состояниями.

Конечно возможны нюансы с тем что, к примеру, несколько (больше двух) ваших страниц попадут во viewport (помним что мониторы можно развернуть и вертикально, получив высоту viewport'а в 2k пикселей), но в целом получается весьма стабильно работающая схема.

Дополнительный плюс в том что вам не нужно заниматься отслеживанием события scroll т.к. это и сложнее в реализации и менее надёжно и есть связанные с ним проблемы (подробнее в документации)

Comments

[Spaceoddity]

Ага, спасибо. Сейчас покурю.

[Spaceoddity]

Да, то что надо!
Несколько экранов действительно постоянно попадают в поле наблюдения, но там есть функционал для этого:

let observerMarginBottom = document.documentElement.clientHeight - document.getElementById("header").offsetHeight,
		observerMargin = "0px 0px -" + observerMarginBottom + "px 0px",
		observerOptions = {
			rootMargin: observerMargin, 
			threshold: 0
		};