HTML5或者JavaScript有没有内置的判断元素可见的API

Question

如果元素在浏览器视窗内就可见，否则就不可见。

目前还需要根据窗口高度、元素高度、滚动距离等去计算判断，都2021年了，这种常用的API应该内置了吧。

Answer 1

document.body.innerHTML = `
<div style="height:300px"></div>
<div id="box" style="width:200px;height:200px; background:red"></div>
<div style="height:1000px"></div>
`;

const observer = new IntersectionObserver((entries) => {
  console.log(entries[0].isIntersecting);
}, {
  root: null,
  rootMargin: "0px",
  threshold: 0
});
observer.observe(document.querySelector("#box"));