如何知道滚动到元素是在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>