How to get skrollr.js working with turbolinks

Question

Skrollr.js seems to stop working when you go back to a page with turbolinks. It works just fine if you manually refresh the page again or go to the page through the data-no-turbolink link.

I have tried calling the function using all possible ways but still no luck, mainly:

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

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

There's a similar question on here but the accepted answer was that you should just disable turbolinks. I'd like to know how to keep skrollr working with turbolinks enabled.

Answer 1

Figured it out in the end. You need to call skrollr normally then use skrollr.init().refresh(); on the new page or load page function for your pushstate plugin. So with turbolinks use this:

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

Hopefully this will save someone a lot of time.