Как обрабатывать несколько полностью видимых элементов через IntersectionObserver?

Question

[lexstile]

Задача: реализовать подсветку активной категории.
Проблема: бывают ситуации, когда на экране полностью видно более 1 блока (в десертах 2 элемента, скролл в ноль внизу).


Что делать в подобных ситуациях?
Какой логикой руководствоваться?

Comments

[Ankhena]

Какой логикой руководствоваться?

Вы сначала на родном языке расскажите какой логикой вы хотите руководствоваться в этом случае и какую из ссылок подсвечивать?

А дальше дело техники.

[lexstile]

Ankhena, в этом в том числе сложности, но я подумал и у меня получилось что-то подобное:
При скролле вниз:
- выбираем категорию, если блок следующей (ниже стоящей) категории занимает > 50% viewport.
- если несколько категорий с видимостью 100%, то выбираем последнюю в DOM (т. е. нижнюю)

При скролле вверх:
- выбираем категорию, если блок следующей (выше стоящей) категории занимает > 50% viewport.
- если несколько категорий с видимостью 100%, то выбираем первую в DOM (т. е. верхнюю)

При инициализации (scrollY = 0):
- выбирается первая категория в списке

При инициализации (scrollY = center):
- логика работы такая же, как при scroll вниз

При инициализации (scrollY = bottom):
- выбирается последняя категория в списке

Основные проблемы: как реализовать главный кейс: определение, что следующая категория занимает более 50% viewport.