Question

我试图附上＆＃34; up＆＃34; ＆＃34; down＆＃34;使用Waypoints {{3}}版本的waypoints版本，将No Framework放置在可滚动元素列中的某些元素上。我有一定程度的成功，但我发现航点往往是早期触发（在我的简报中，只有当元素出现在视口中时才能可靠地触发结果）。当然，我错误地实现代码或者没有理解基本的东西是合理的，这是我的代码：

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。

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

EDIT2：我决定使用替代解决方案（请参阅答案）。没有什么可以反对Waypoints，顺便说一下 - 无论是我处理的网站还是我缺乏理解的网站都可能引入了＆＃39;并发症＆＃39; ;）

Answer 1

FWIW我在其他地方使用了以下功能：

$(document).ready(function() {

    var thing = {
        menu: $("#menu"),

        init: function() {
            var _this = this;
            this.doSomething();
            this.menu.on("click", "div", this.handleClick);
        },

        doSomething: function() {
            console.log(this); // thing
        },

        handleClick: function() {
            console.log(this); // div that was clicked on
            // How to console.log(_this) i.e. thing ?
        }
    };
    thing.init();
});

没有框架航点 - 不可靠的触发

1 个答案: