Функция, проверяющая, попал ли элемент в область видимости пользователя

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

Для проверки того, попал ли какой-то конкретный элемент в область видимости пользователя, можно воспользоваться функцией:

<script>BX.checkPosition = function (container) {
     // координаты дива
     var div_position = container.offset();
     // отступ сверху
     var div_top = div_position.top;
     // отступ слева
     var div_left = div_position.left;
     // ширина
     var div_width = container.width();
     // высота
     var div_height = container.height();
 
     // проскроллено сверху
     var top_scroll = $(document).scrollTop();
     // проскроллено слева
     var left_scroll = $(document).scrollLeft();
     // ширина видимой страницы
     var screen_width = $(window).width();
     // высота видимой страницы
     var screen_height = $(window).height();
 
     // координаты углов видимой области
     var see_x1 = left_scroll;
     var see_x2 = screen_width + left_scroll;
     var see_y1 = top_scroll;
     var see_y2 = screen_height + top_scroll;
 
     // координаты углов искомого элемента
     var div_x1 = div_left;
     var div_x2 = div_left + div_width;
     var div_y1 = div_top;
     var div_y2 = div_top + div_height;
 
     // проверка - виден див полностью или нет
     if( div_x1 >= see_x1 && div_x2 <= see_x2 && div_y1 >= see_y1 && div_y2 <= see_y2 ){
         // если виден
         // container.css({'background-color': 'green'});
         return true;
     }else{
         // если не виден
         // container.css({'background-color': 'red'});
         return false;
     }
};</script>

Тогда, передавая, в цикле каждый из элементов представления можно проверить, был показан элемент пользователю, или нет.

Вызов функции в общем виде выглядит так:

<script>$(document).ready(function(){
     $(document).scroll(function(){
         // при скролле страницы делаем проверку
         checkPosition($('#div_to_check'));
     });
      
     // после загрузки страницы сразу проверяем
     checkPosition($('#div_to_check'));
      
     // проверка при масштабировании и изменении размера страницы
     $(window).resize(function(){
         checkPosition($('#div_to_check'));
     });
      
 });</script>

В реальной задаче, конечно же, обработчик будет сложнее: нужно в цикле прогонять все элементы, которые нужно проверить и каждый элемент уже поотдельности проверять.