无框架航点 - 不可靠的触发

Question

我正在尝试使用No Framework 版本的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;

两个航路点似乎在这种程度上起作用，而不是在handler 内的direction 上使用三元运算符来设置根本不起作用的offset。

编辑：我将容器的 css 高度更改为像素值，Waypoint 像素值为 400。这样做我可以看到 Waypoint 触发点正在增加（即获取在页面的下方触发 - 太早了），所以它开始正常，但会逐渐变得更糟。

EDIT2：我决定使用替代解决方案（见答案）。顺便说一句，没有什么反对 Waypoints - 我正在处理的网站或我缺乏理解可能会引入“并发症”;)

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;

}