Как посмотреть, какой из элементов виден на экране при скролле?

Question

[Im p3l]

При прокрутке страницы вниз добавляются новые элементы, есть метод, который проверяет виден ли элемент boundary на экране.
Хочу сделать, чтобы при скролле вверх или вниз этот метод выводил в консоль, какой из элементов boundary виден на экране. А если видны сразу два и больше, показывал в консоле последний из них

Comments

[YavaDev]

Вот здесь есть функция которая возвращает массив элементов, которые видны. Правда она написана на jQuery, но думаю не составит труда ее переписать на чистый js если надо.

Answer 1

[Im p3l]

решил свою же проблему, может кому пригодится

Answer 2

[Даниил]

Intersection Observer
либо считать по скроллу и положению элемента на странице

Comments

[Im p3l]

Intersection Observer в IE, даже в 11 версии не поддерживается.
а вторым вариантом не очень понимаю как сделать

[Даниил]

Lo Ran, если в общем: слушаем скролл -> знаем позицию скролла (относительно начала страницы) + позицию элемента относительно верха страницы -> cравниваем значения

[Im p3l]

Даниил сделал решение, но есть проблема с постоянным вызовом метода, при скролле. Очень сильно влияет на производительность. Было бы здорово, если подскажете как можно оптимизировать

[Даниил]

Lo Ran, попробовать удалять слушатель при определённых условиях. Например слушать скролл без выполнения метода, а меняя переменную (допустим пока true - выполняем, как-только выполнили - false). Если допускается небольшая задержка - можно использовать что-то типа debounce
Либо используйте полифилл IO

[Im p3l]

Даниил Спасибо за советы!