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

Question

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

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

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

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

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

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

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

Answer 1

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

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