No Framework Waypoints - ненадежное Запуск

Question

Я пытаюсь подключить «вверх» и «вниз» waypoints к некоторым элементам в прокручиваемом столбце элементов с использованием No Framework версии 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 я использовал следующие функции не найден на SO в другом месте:

isScrolledIntoView: function (el) { 

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

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

    return isVisible; 

}