Наблюдатель пересечения rootBound дает неверное значение

Question

У меня есть контейнер прокрутки, где дети прокручивают по вертикали.В нем много мелких элементов.Высота моего контейнера прокрутки составляет 100vh.Моя задача состоит в том, чтобы наблюдать их, как только они достигают 100px ниже верхней границы (в моем случае это верхняя часть области просмотра).

Для этого я создаю наблюдателя на пересечении в моем элементе контейнера прокрутки с rootmargin как -100px 0px 0px 0px.

Я наблюдаю на пороге 1.

При обратном вызове наблюдателя на перекрестке я проверяю: entry.intersectionRect.top === entry.rootBound.top.Это гарантирует, что я проверяю только самый верхний элемент.

Все эти операции происходят, как и ожидалось, но с одной проблемой: пересечение наблюдается не на 100px ниже вершины, а на 81px ниже вершины.Я подтвердил это, когда проверил, что в обратном вызове значение entry.rootBound.top равно 81px.

Я полагаю, что это не должно быть так, у rootBound должен быть top, аналогичный top margin, который я дал в параметре конструктора.

Очень плохо знаком с наблюдателем на пересечении, и я хочу использовать его в своем проекте, но не могу сделать это с несоответствиями.

Answer 1

Единственное возможное решение, которое, как мне показалось, работает правильно, - это поместить наблюдателя пересечения на весь видовой экран, но передать верхнее поле в 10 пикселей (может быть любым значением).Затем обратите внимание, что при загрузке страницы мы получим значение rootBounds, и это может указать, что такое rootBounds.top.Отсюда можно определить, каково соотношение пикселей устройства (givenMargin/rootBounds.top).Тогда мы можем просто не заметить этого наблюдателя Бесконечного пересечения.

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