프레임 워크 웨이 포인트 없음 - 신뢰할 수없는 트리거링

Question

버전 Waypoints을 사용하여 요소의 스크롤 가능한 열의 특정 요소에 "위로"및 "아래로"waypoints을 첨부하려고합니다. 나는 성공 정도가 있지만, 웨이 포인트가 조기에 트리거되는 것보다 더 자주 찾는 것으로 나타났습니다 (요소가 뷰포트에 나타날 때만 결과가 안정적으로 트리거된다는 것이 중요합니다). 물론 내가 잘못 코드를 구현하거나 근본적인 무언가를 이해하지 못하는거야 것을 좋은 기회에 합리적인있다, 그래서 여기 내 코드입니다 :

var scrollableContent = dom.byId('scrollable-content'); 

query('.foo').forEach(function(el){ 

    new Waypoint({ 

     element: el, 
     context: scrollableContent, 
     offset: 'bottom-in-view', 
     handler: function(direction) { 
      if(direction==='down') { 
       // do something 
      } 
     } 

    }); 

    new Waypoint({ 

     element: el, 
     context: scrollableContent, 
     offset: 5, 
     handler: function(direction) { 
      if(direction==='up') { 
       // do something else 
      } 
     } 

    }); 

}); 

scrollable-content 컨테이너는 다음과 같은 CSS를 가지고 :

height:74%; 
width:100%; 
overflow:scroll; 

을 두 웨이 포인트는 direction에서 handler 내부의 삼항 연산자를 사용하는 것보다 전혀 작동하지 않는 offset을 설정하는 것보다 어느 정도 작동하는 것으로 보입니다.

EDIT : 내 컨테이너의 CSS 높이를 웨이 포인트 픽셀 값 400으로 변경했습니다 페이지 - 너무 일찍), 시작하자마자 점차적으로 악화된다.

EDIT2 : 대체 솔루션 (대답 참조)을 사용하기로 결정했습니다. BTW 웨이 포인트 상대로 아무것도 - 중 내가 또는 이해 나의 부족을 도입 할 수있다 '합병증'을 취급하고있어 사이트)

Answer 1

FWIW 난 다음 함수를 사용 그래서 다른 곳에서 찾을 수 없습니다 :

isScrolledIntoView: function (el) { 

    var elemTop = el.getBoundingClientRect().top; 
    var elemBottom = el.getBoundingClientRect().bottom; 

    var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight); 

    return isVisible; 

}