画面内に要素があることを検知

目次をハイライト表示をさせたくその雛形をメモします。
下記のコードは画面内に要素があればactiveを付与、無ければ除去します。

const targetContent = document.querySelector(".target-content")

const options = {
  root: null,
  rootMargin: "0px",
  threshold: 0
}
const observer = new IntersectionObserver(callback, options);
observer.observe(targetContent)

function callback(entries) {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      targetContent.classList.add("active")
    } else {
      targetContent.classList.remove("active")
    }
  });

参考