Как отследить появление элемента на экране и получить его id?

Question

[smilelan]

Всем добрый день! Нашел в интернете функцию отслеживания появление блока на экране по классу. Но вопрос такой у меня несколько таких блоков, и необходимо получить id показываемого блока в данный момент. Буду рад если кто-то поможет! Спасибо!
<div class="active">Active</div>

var block_show = null;
 
function scrollTracking(){
	var wt = $(window).scrollTop();
	var wh = $(window).height();
	var et = $('.active').offset().top;
	var eh = $('.active').outerHeight();
 
	if (wt + wh >= et && wt + wh - eh * 2 <= et + (wh - eh)){
		if (block_show == null || block_show == false) {
			console.log('Блок active в области видимости');
		}
		block_show = true;
	} else {
		if (block_show == null || block_show == true) {
			console.log('Блок active скрыт');
		}
		block_show = false;
	}
}
 
$(window).scroll(function(){
	scrollTracking();
});
	
$(document).ready(function(){ 
	scrollTracking();
});

Answer 1

[Александр]

Можно при помощи Intersection Observer API:

function scrollTracking(entries) {}

const observer = new IntersectionObserver(scrollTracking, {
    threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0]
});

observer.observe(YOUR_ELEMENT));

Comments

[smilelan]

забыл отметить что подгрузка новых блоков с таким же классом происходит путем ajax пагинации

[Александр]

smilelan, Ну так берите, и также ново-созданные элементы в observer.observe закидывайте.

Answer 2

[alexalexes]

Самым ленивым способом эту функцию можно переписать так:

var block_show = []; // начальный массив, можно не инициировать null-ами
 
function scrollTracking(){
  var wt = $(window).scrollTop();
  var wh = $(window).height();
  var elems = $();  // тут пишем селектор для выбора коллекции элементов, позиции которых нужно отследить
  var elem_count = elems.length;
 // перебираем элементы, и выводим что появилось на экране, что нет.  
  var et = null, eh = null;
for (var i = 0; i < elem_count; i++)
  {
 et = elems[i].offset().top;  // тут уже получаем параметр от i-ого элемента
   eh = elems[i].outerHeight(); // тут уже получаем параметр от i-ого элемента
 
  if (wt + wh >= et && wt + wh - eh * 2 <= et + (wh - eh)){
    if (block_show[i] === undefined || block_show[i] === null || block_show[i] === false) { // анализ block_show тоже от i-ого элемента
      console.log('Блок ' + i + ' в области видимости');
    }
    block_show[i] = true;  // установка block_show тоже от i-ого элемента
  } else {
    if (block_show[i] === undefined || block_show[i] === null || block_show[i] === true) { // анализ block_show тоже от i-ого элемента
      console.log('Блок ' + i + ' скрыт');
    }
    block_show[i] = false; // установка block_show тоже от i-ого элемента
  }
  } // конец цикла обхода отслеживаемых элементов
}

Обратите внимание, что в if-ах проявилось сравнение с undefined, это позволяет не создавать первоначальный массив, наполненный null-ами, но можно наполнить по числу отслеживаемых элементов. И все сравнение идут по === это позволяет учитывать типы переменных при сравнении, оно более строгое.

Comments

[smilelan]

[alexalexes]

Пока тут не пропишите селектор, который извлечет коллекцию элементов, цикл не заработает:
var elems = $();

[Юрий]

А если у нас много блоков Active XXX как это можно записать?