Comparison
IntersectionObservervsResizeObserver
IntersectionObserver
you found out when the element scrolled into view without running any code on scroll.
An API that reports asynchronously when an element enters or leaves a viewport or ancestor, off the main thread's scroll path. It replaced the pattern of measuring positions in a scroll handler, which caused forced layout on every frame. Its callback is throttled and batched, so it is for triggering work rather than for driving a scroll-linked animation.
Full entry →ResizeObserver
you reacted to the element changing size instead of listening for the window resizing.
An API reporting size changes of specific elements, whatever caused them — window resize, content change, a sibling growing. It gives the measurement without a forced layout, which is what makes it the correct replacement for measuring in a resize handler. Writing a style in its callback that changes the observed size produces a loop the browser detects and reports as an error.
Full entry →