要素がビューポートに入ったかどうかを効率的に監視する
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
observer.unobserve(entry.target);
}
});
}, { threshold: 0.1 }); // 10%以上表示されたら発火
document.querySelectorAll('.lazy').forEach(el => {
observer.observe(el);
});scrollイベントより遥かに効率的。無限スクロールや遅延画像読み込み（lazy loading）の実装に最適。threshold配列で複数の閾値を指定できる。