IntersectionObserverEntry: свойство intersectionRatio

Только для чтения свойство IntersectionObserverEntry интерфейса intersectionRatio показывает, какая часть целевого элемента в настоящее время видна в области пересечения с контейнером, как значение от 0,0 до 1,0.

Число от 0,0 до 1,0, которое указывает, какая часть целевого элемента фактически видна в прямоугольнике пересечения с контейнером. Точнее, это отношение площади прямоугольника пересечения (intersectionRect) к площади прямоугольника границ целевого элемента (boundingClientRect).

Если площадь прямоугольника границ целевого элемента равна нулю, возвращаемое значение равно 1, если isIntersecting имеет значение true, или 0, если нет.

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

function intersectionCallback(entries) {
  entries.forEach((entry) => {
    entry.target.style.opacity = entry.intersectionRatio;
  });
}

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