? ??? ??? ??? API? ???? ???? ?? ????? ? ?? ??? ?????. ?? ??? ?? ?? ? ????? ???? ??? ? ??? ??? ????? ???? ?? ????? ?? ??? ?????? ??? ?????.

W3C ????? ?? ? ??? ??? API? ???? ?? ???? (??)? ?? DOM ?? (??)? ??? ? ??? ?????? ????? ?????. ? ??? ???? ?? ???? ????? ????, ???? ? ????? ???? ??????. ???? ??? ??? ???? ?? ?? ?? ????? ??? ??? ??? ????. ? ? ??? ??? ??? ? ????.

??? ???? ?? ?? ?? :

1. root : ?? ? ??? ?? ? ?? ?? (?? ???? ?? null ).
2. target : ?? ??? ???? ????.
3. options ?? : ??? ??? ????? (?? ??).
4. callback ?? : ??? ??? ??? ??? ?????.

?? ? : ? :

 const ?? = {
  ?? : document.body,
  rootmargin : '0px',
  ?? ? : 0
};

?? ?? (??, ???) {
  Console.log (???); // ??? ?? ??
  entries.foreach (Entry => console.log (Entry)); // ? ??? ?? ?? ??
}

Observer = New IntersectionObserver (??, ??);
Observer.observe (TargetElement);

options ?? ?? :

• root : ?? ? ?? ??, ?? ??. null ???? ???? ????? ????? ?????.
• rootMargin : ??? ?? ??? ????? ???? ??? ??? ??? ??? CSS ??? ?? ??? (? : '10px 20px' ). ??? ??? ? ?????. root ? null ?? ???? ????.
• threshold : ??? ????? ? ??? ?? ??? ???? ???? ?? (0-1) ?? ??. 0 ???? ???; ?? ??? ?? ????? ?? 1 ???????.

callback ?? ? IntersectionObserverEntry :

??? ?? ? ? ??? ?? ??? IntersectionObserverEntry ? ?????. ?? ???? ??? ?????.

• isIntersecting : ???? ???? ??.
• intersectionRatio : ??? ???? ?? (0-1) ?????.
• boundingClientRect : ???? ?? ??? ?? ???.
• intersectionRect : ?? ??? ???.
• rootBounds : ???? ?? ??? ?? ???.
• target : ?? ? ?? ??? ?? ??.
• time : ??? ??? ?? ???.

?? ??? ?? :

• observe(target) : ???? ??? ?????.
• unobserve(target) : ??? ?????.
• disconnect() : ?? ?? ??? ?????.

?? ?? : ?? ??? vs. ??? ??? :

????? ?? ??? ??? ?? ? ? ??? ???? ??? ??? ?????. ??? ????? ?? ??? ?? ?? ??? ????? ??? ????? ???? ?? ???? ?? ???? ?????.

intersectionRatio ?? ? ?? ?? :

intersectionRatio ???? ??? ????? ?? ???? ??? ?? ????. ?? boundingClientRect , intersectionRect ? rootBounds ? ???? ?? ??? ??? ?? ??? ?????.

"?? ???"??? ??? ??? :

rootMargin ( '0px 0px -100% 0px' )? ??? ??? "?? ???"?? ???? ??????? ??? ???? ??? ???? ??? ??? ? ? ????.

??? ???? ?? :

???? ???? ??? ???? ??? ???? ??????. ???? ???? ?? ??? ??? ??/??? ????? ???? ??? ??? ? ? ????.

???? ?? ? ??? :

??? ???? ?? ????? ??? ??? ?? ???? ???? ???? ??? ????. ??? ?? ????? transform ? clip-path ? ??? ?????? ???? ???? ??? ???? ????.

??? ??? v2 (??) :

?? ??? ??? ??, ???? ? ??? ??? ?????? trackVisibility ? delay ??? ?????. ??? ??? ??? ???? ????.

?????, ??? ??? API? ?? ??? ? ??? ????? ?????? ??? ????, ???? ??? ??? ???? ?? ??? ?????. ???? ???? ???? ??? ?? ? ??????? ?? ? ??? ???? ??? ??? ? ????.

? ??? ??? ???? ??? ?????? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!