Как определить, что блок находится в центре viewport, используя IntersectionObserver?

Question

[Yana]

Механика как должно работать:

1. пользователь скроллит страницу сверху вниз: при попадании блока во viewport (внизу страницы) фон затеняется. Пользователь скроллит дальше, когда блок находится в середине экрана, затенение пропадает.
   
2. пользователь скроллит страницу снизу вверх: при попадании блока во viewport (вверху страницы) фон затеняется. Пользователь скроллит дальше вверх, затенение пропадает, когда блок оказывается в середине экрана.
   

Не получается прописать условие, используя IntersectionObserver, чтобы затенение пропадало, когда блок в центре.
Сейчас блок пропадает только когда срабатывает threshold.
В центре он не срабатывает, поэтому не удается засечь пересечение центра.
И rootMargin readOnly, динамически не изменить.

https://jsfiddle.net/YanaLins2017/omfuapq4/

Comments

[historydev]

Сейчас у вас пропадает тень когда блок в центре и вы крутите вниз, в центре он потому-что вы видимо считаете от его верхней части, чтобы получить нужный вам центр нужно отнять 50% высоты при расчётах и аналогично в обратную сторону

[Yana]

Владимир, возможно из-за разрешения так совпадает, что тень пропадает.

Сейчас пропадает только когда срабатывает threshold.
В центре он не срабатывает. Координаты обновляются только у rootMargin , поэтому не удается засечь пересечение центра. И rootMargin readOnly, динамически не изменить.

Answer 1

[historydev]

Как-то так

Comments

[Yana]

спасибо, но, к сожалению, в этом решении не используется IntersectionObserver. И проблема как раз в том как соединить все условия показа.