Waypoints.js : 페이지로드시 요소가 보이는지 확인합니다.

Question

요소가 초기 페이지로드시 waypoints.js와 함께 표시되는지 여부를 어떻게 확인하나요?

스크롤 할 때 트리거되는 이벤트에만 기능을 연결할 수있는 것처럼 보입니다.

Answer 1

실제로 Waypoints.js은 스크롤 이벤트가 발생할 때가 아니라 초기화시 추적 된 요소의 위치도 검사합니다. 즉, 요소가 뷰포트 아래쪽에 있는지 관찰하는 것입니다. 경유지를 사용하면 offset 매개 변수를 100%으로 설정하면됩니다. 이렇게하면 문제의 요소가 뷰포트에있는 경우 처리기 함수가 페이지로드시 호출됩니다.

다음은 두 개의 초기화 된 중간 지점 객체가있는 작업 예제입니다.

var waypoint1 = new Waypoint({ 
 
    element: document.getElementById('waypoint'), 
 
    handler: function(direction) { 
 
     console.log('#waypoint in viewport – NO OFFSET'); 
 
    } 
 
}); 
 

 
var waypoint2 = new Waypoint({ 
 
    element: document.getElementById('waypoint'), 
 
    offset: '100%', 
 
    handler: function(direction) { 
 
     console.log('#waypoint with OFFSET: 100% in viewport'); 
 
    } 
 
});

#placeholder { 
 
    height: 50vh; 
 
    background-color: #d4cdc3; 
 
} 
 

 
#waypoint { 
 
    background-color: #d5d0cd; 
 
} 
 

 
#bottom { 
 
    height: 200vh; 
 
    background-color: #a2a392; 
 
}

<div id="placeholder"></div> 
 
<div id="waypoint">[Test content]</div> 
 
<div id="bottom"></div> 
 

 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/noframework.waypoints.min.js"></script>