要素へのスクロールを知る方法はJavascriptで行われますか？

Question

私はJavascript方法Element.scrollIntoView()
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

を使用しています、私はスクロールが終わったときに知ってもらうことができますどのような方法があります。アニメーションがあったとか、または{behavior: smooth}と設定したとします。

私は、スクロールが非同期であり、そのメカニズムのようなコールバックがあるかどうかを知りたいと思っています。

Answer 1

あなたは、IntersectionObserverを使用する要素.isIntersecting場合IntersectionObserverコールバック関数

const element = document.getElementById("box"); 
 

 
const intersectionObserver = new IntersectionObserver((entries) => { 
 
    let [entry] = entries; 
 
    if (entry.isIntersecting) { 
 
    setTimeout(() => alert(`${entry.target.id} is visible`), 100) 
 
    } 
 
}); 
 
// start observing 
 
intersectionObserver.observe(box); 
 

 
element.scrollIntoView({behavior: "smooth"});

body { 
 
    height: calc(100vh * 2); 
 
} 
 

 
#box { 
 
    position: relative; 
 
    top:500px; 
 
}

<div id="box"> 
 
box 
 
</div>