This is an example of using the IntersectionObserver API with React to dynamically keep an anchor element scrolled into the viewport, if the anchor was visible before the update. In other words, if the bottom of the logs are visible, then automatically scroll when new logs come in, but don’t scroll if the user scrolled away from the bottom.
By combining the IntersectionObserver API with a React component, we can track efficiently monitor the scroll position of an anchor element and keep track of its visibility in the component’s state. When new content is added, we can decide whether to scroll based only on the component’s state.