效果 
源码
<!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>
