如何使skrollr.js与Turbolinks一起使用

Question

当您返回带有Turbolink的页面时，Skrollr.js似乎停止工作。 如果您再次手动刷新页面或通过data-no-turbolink链接转到页面，则效果很好。

我尝试使用所有可能的方式调用该函数，但仍然没有运气，主要是：

$(document).on('ready page:load', function () {
var s = skrollr.init(); 
});

$(document).on('ready page:change', function () {
    var s = skrollr.init(); 
    });

这里有一个类似的问题，但是可以接受的答案是您应该只禁用turbolinks。 我想知道如何在启用Turbolink的情况下使skrollr正常工作。

Answer 1

最后弄清楚了。 您需要正常调用skrollr，然后使用skrollr.init（）。refresh（）; 在您的pushstate插件的新页面或加载页面功能上。 因此，在turbolinks中使用以下命令：

$(document).on('page:load', function () {
skrollr.init().refresh(); 
});

希望这将节省很多时间。

Answer 2

我所做的就是在page:before-change事件上调用Skrollr destroy()方法，我还修改了skroll.js并命名了这些事件的名称（向它们添加了.skroll ）：

_addEvent(window, 'resize.skroll orientationchange.skroll) …')

因此，在调用destroy（）方法之后，还：

$(window).off("resize.skroll");
$(window).off("orientationchange.skroll");

希望这可以帮助。