관찰 된 요소가 position: absolute있고 루트가 뷰포트가 아닌 경우 IntersectionObserver가 작동하지 않는 것 같습니다 .
여기에 뭔가 빠졌나요?
( position: absolute예상 결과를 보려면를 제거 하십시오.)
let intersectionRoot = document.getElementById("intersectionRoot");
let observedElement = document.getElementById("observedElement");
let shifted = false; // Internal for the example
let interSectionObserver = new IntersectionObserver(
(entries, observer) => {
console.log(entries[0].isIntersecting)
},
{ root: intersectionRoot }
);
interSectionObserver.observe(observedElement);
window.setInterval(
() => {
observedElement.classList.toggle("shifted")
},
1000
)#intersectionRoot {
background-color: red;
width: 100px;
height: 100px;
}
#observedElement {
position: absolute;
background-color: green;
width: 50px;
height: 50px;
}
.shifted {
transform: translate3d(110px, 0, 0)
}<div id="intersectionRoot">
<div id="observedElement" draggable="true"></div>
</div>해결책은 position: relative루트 요소 에 추가 하는 것입니다. 다음은 업데이트 된 데모 입니다.
position: relative루트 요소로 명시 적으로 설정하지 않으면 자식 (이 경우 observedElement) 이 body. 로부터 IntersectionObserver 워드 프로세서 :An IntersectionObserver with a non-null root is referred to as an explicit root observer, and it can observe any target Element that is a descendant of the root in the containing block chain.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다