교차 관찰자 API 발생 콜백 짝수 요소가 뷰에 없음

요소가 화면에있는 경우 (무한 로더 구현을 시도)를 찾으려고합니다.교차 관찰자 API 발생 콜백 짝수 요소가 뷰에 없음

Observer를 목록의 마지막 항목에 바인딩하고 아쉽게도 chrome 62 mac 10.10에서 듣고있는 요소가 뷰포트에 있지 않아도 콜백이 실행됩니다.

교차비를 확인하면 쉽게 방지 할 수 있습니다. 이것은 교차 관찰자가 일하는 방식입니까?

미리 도움을 청하십시오.

bindIO(); 
 

 

 
function ioCallback(entries, observer) { 
 
    console.log("entries"); 
 
    console.log(entries); 
 
    entries.forEach(entry => { 
 
     // Each entry describes an intersection change for one observed 
 
     // target element: 
 
     console.log(entry.boundingClientRect); 
 
     console.log(entry.intersectionRatio); 
 
     console.log(entry.intersectionRect); 
 
     console.log(entry.isIntersecting); 
 
     console.log(entry.rootBounds); 
 
     console.log(entry.target); 
 
     console.log(entry.time); 
 
    }); 
 
} 
 

 
function bindIO(arguments) { 
 
    var options = { 
 
     threshold: 1.0 
 
    } 
 

 
    observer = new IntersectionObserver(ioCallback, options); 
 
} 
 
var triggerel; 
 
var lastIndex; 
 
var items; 
 
var observer; 
 

 
setTimeout(function() { 
 
    observeEl(); 
 
}, 2000); 
 

 

 
function observeEl(arguments) { 
 
    items = document.querySelectorAll('.item'); 
 
    lastIndex = items.length 
 
    triggerel = items[lastIndex - 1]; 
 
    observer.observe(triggerel); 
 

 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
\t <head> 
 
\t \t <meta charset="utf-8"/> 
 
\t \t <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"/> 
 
\t \t <title>HTML BolierPlate</title> 
 
\t  <link rel="stylesheet" type="text/css" href="css/reset.css"></link> 
 
\t  <link rel="stylesheet" type="text/css" href="css/mystyle.css"></link> 
 
\t \t <style> 
 
\t \t \t .item{ 
 

 
\t \t \t \t background: green; 
 
\t \t \t \t margin: 30px; 
 
\t \t \t \t height: 400px; 
 
\t \t \t \t width: 400px; 
 
\t \t \t \t color: black; 
 
\t \t \t \t font-weight: black; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t </style> 
 

 
\t </head> 
 

 
\t <body> 
 
\t  
 
\t  Welcome to BoilerPlate!!! 
 
\t \t 
 

 

 
\t \t <div class="item-1 item"> 
 
\t \t \t 
 
\t \t \t Items #1 
 

 
\t \t </div> 
 

 
\t \t <div class="item-2 item"> 
 
\t \t \t 
 
\t \t \t Items #2 
 

 
\t \t </div> 
 

 
\t \t <div class="item-3 item"> 
 
\t \t \t 
 
\t \t \t Items #3 
 

 
\t \t </div> 
 

 
\t \t <div class="item-4 item"> 
 
\t \t \t 
 
\t \t \t Items #4 
 

 
\t \t </div> 
 

 
\t \t <div class="item-5 item"> 
 
\t \t \t 
 
\t \t \t Items #5 
 

 
\t \t </div> 
 

 
\t \t <div class="item-6 item"> 
 
\t \t \t 
 
\t \t \t Items #6 
 

 
\t \t </div> 
 

 
\t \t <div class="item-7 item"> 
 
\t \t \t 
 
\t \t \t Items #7 
 

 
\t \t </div> 
 

 
\t \t <div class="item-8 item"> 
 
\t \t \t 
 
\t \t \t Items #8 
 

 
\t \t </div> 
 

 
\t \t 
 

 
\t \t <script src="js/lib/jquery.min.js" ></script> 
 
\t  <script src="js/myscript.js" ></script> 
 
\t  
 
\t </body> 
 
</html>

출처

2017-12-10 Mohamed Hussain

반 직관적 보인다 실제로 당신이 접촉 한 뭔가.

IntersectionObserver가 인스턴스화 될 때 콜백은 요소가보기에 있는지 여부를 감지하여 한 번 실행됩니다 (보이지 않는 경우 isIntersecting 속성을 false로 올바르게보고 함).

가장 간단한 방법은 요소가 실제로 표시 될 때만 실행해야하는 기능을 실행하기 전에 .isIntersecting을 검사하는 것입니다.

희망 사항은 올바른 길을 가고 있는지 확인하는 데 도움이되기를 바랍니다. 실수를하지 않은 상태에서 체크인하면됩니다.

출처

2017-12-17 13:13:55

DOM에 이미있는 요소를 관찰하기 시작할 때 교차 관찰자가 먼저 교차 검사를하고 교차하는지 여부를 확인합니다. 답변 해주셔서 감사합니다 –

교차 관찰자 API 발생 콜백 짝수 요소가 뷰에 없음

답변

관련 문제