效果 
源码
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>IntersectionObserver</title><style>div {height: 700px;}</style></head><body><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><script>let observer = new IntersectionObserver((entries) => {entries.forEach(entry => {entry.target.innerText = entry.isIntersecting ? '测试' : '';entry.target.style["background-color"] = entry.isIntersecting ? 'red' : 'blue';entry.target.style["font-size"] = entry.isIntersecting ? '80px' : '';})}, {root: null, threshold: 0.5 });document.querySelectorAll('div').forEach(element => {observer.observe(element)});</script></body>
</html>
