X 픽셀을 기준으로 한 * .isIntersecting의 값을 변경하도록 교차점 설정을 구성합니다.

Question

교차 관찰자 객체가 작동하지만 교차점의 맨 아래 또는 100pixels에 대해 한 번 알려주고 싶습니다.

기본 구성에서는 요소가 정확히 표시되면 .isIntersection의 값만 변경됩니다. 그러나 요소가 뷰포트의 위 또는 아래 100 픽셀 인 경우 몇 가지 작업을 수행하려고합니다. 내가 이것을 사용 답변을 사용자에게

감사

var iObserver = new IntersectionObserver(function(element) { 
    console.log('elementi', element); // I want to trigger here when elementi is 100px or less of distance to the viewport. 
}); 

var el; 
for (var i = 0; i < elements.length; i++) { 
    el = elements[i]; 
    console.log('eli', el); 
    iObserver.observe(el); 
} 

UPDATE 그것은 일 :

이

내 코드입니다

var iObserver = new IntersectionObserver(function(entryEvent) { 
//... 
}, {'rootMargin': '100px 0px 100px 0px'}); 

Answer 1

당신은에서 rootMargin 상단과 하단을 정의 할 수 있습니다 옵저버에 전달하는 옵션. 그것은 .container에서 10px의 거리에 도달 할 때 데모에서

은, 관찰자가 호출, 빨간색 사각형을 가져 :

const options = { 
 
    root: document.querySelector('.container'), 
 
    rootMargin: '10px 0px 10px 0px', 
 
}; 
 

 
let i = 0; 
 

 
const iObserver = new IntersectionObserver((entries) => console.log(`intersection ${i++}`), options); 
 

 
iObserver.observe(document.querySelector('.element'));

.container { 
 
    position: relative; 
 
    height: 20px; 
 
    background: lightblue; 
 
} 
 

 
.element { 
 
    position: absolute; 
 
    top: calc(100% + 30px); 
 
    height: 100px; 
 
    width: 100px; 
 
    background: red; 
 
    margin-bottom: 20px; 
 
    transition: top 5s; 
 
} 
 

 
.element:hover { 
 
    top: calc(100% - 30px); 
 
} 
 

 
.as-console-wrapper { 
 
    height: 50px; 
 
}

<div class="container"> 
 
    <div class="element">1</div> 
 
</div>