Fullpage.js: Does not play nicely with Turbolinks

[dja]

I have fullPage.js implemented on my homepage, but when a user navigates to a different page via link on the page, they cannot scroll on that new page unless the page is refreshed/reloaded.

I think it's a matter of Turbolinks being enabled on Rails 4. I want Turbolinks throughout the rest of the app, just not to coincide with fullPage.js.

Do you have anything you can change to optimize this? Or do you have a suggestion?

[alvarotrigo]

Could you post a link to your site? Nobody else has reported this problem and I can not reproduce it.

I'm not familiar with rails or Turbolinks either, but if I see your site I might be able to help.

[jseravalli]

This is happening to me in backbone. Basically when the plugin has autoScrolling:true, it sets the overflow of the body to hidden, when you are using dynamic content and you change the dom content to something else, which is the basic idea behind turbolinks, backbone, ember, and other once page apps, the scroll will remain disabled.

To fix this, you can either stop using autoScrolling or when you load another page verify that the overflow of the body is set to "auto".

UPDATE: Actually I would recommend staying away from autoScrolling, and possibly the library since it attaches several events to elements like window and document. A $.fn.fullPage().remove() would be nice! :)

[alvarotrigo]

You don't need to remove it. You can just change from autoScrolling: true to autoScrolling:false with the method $fn.fullPage().setAutoScrolling(false);

Of course, it adds events to document or window, its a plugin :)

[alvarotrigo]

But I see your problem anyway. You are trying to add sections dynamically, is it right?

[dja]

No, I'm not trying to add sections dynamically, just trying to use FullPage.js for the homepage. When a user clicks a link on the navbar though, it takes them to a login page, and at that point, can't scroll because of Turbolinks vs. FullPage.js being used in tandem.

[alvarotrigo]

Well I'm afraid I can not be of any more help.
The main problem can or can not be related with turbolinks, but as I can not see your site or your code I can not say anything else.

[jseravalli]

Deleted my comment by error.

But basically, what I understand that turbolinks does, is remove the content of the body and dinamically add the new content.

[alvarotrigo]

@jseravalli if that's the case. Any initialization of any plugin should be added after the DOM is created again, once it is ready.

Maybe on the page:load callback?

Anyway, I see this more a problem or an issue of Turbolinks rather than of fullPage.js.

[jseravalli]

@alvarotrigo I dont think its an issue of anybody, what I believe is that the plugin does not play nicely with apps that manage the content of the page dynamically. It works fine for normal pages, but when you have a MVP structure or something like turbolinks modifying the "body" with styles like "overflow:hidden" will affect other pages and prevent scrolling in other parts of the application, unless you reload.

[alvarotrigo]

@jseravalli yeah you are right. It doesn't seem simple to apply these kind of plugin using that technology.

[nikhilvij]

I was trying to use this with turbolinks at http://talentauction.in/
The problem is:
when you go there and click on
'Employers' twice or thrice, the scroll event gets bound again. Next time you scroll, it does 2/3 scrolls.

[alvarotrigo]

@nikhilvij I don't know about turbolinks but try to follow the needed structure as detailed in the docs. (sections as a child of body) Also, add all the javascript at the header.

[nikhilvij]

So, figured out just as I posted the comment.

document.addEventListener('page:fetch', function() {
    $.fn.fullpage.setAllowScrolling(false);
});

Note the page:fetch event as the reference to handler gets lost once you move onto a new page.
I must mention I am using jquery.turbolinks as well which helps handling dom ready events in turbolinks

[dennis-best]

Here a handy workaround for Rails 4, Turbolinks issues.

    if $('body').hasClass("welcome")
      $.fn.fullpage()
      $('html,body').css('overflow','hidden').css('height','100%')
    else
      $('html,body').removeAttr('style')

This works for me in my app where I want this plugin for a welcome page, but not anywhere else.

Would the issues for dynamic, single-page apps that be prevented by adding classes instead of applying local styles, letting an external stylesheet do overflow:hidden;height:100%;? These could then be overridden easily with JS or CSS in various situations.

[alvarotrigo]

Not sure about that, but in that case, the option autoScrollilng or the method setAutoScrolling wouldn't work as expected.

[derrickmar]

Hey guys, I got it to work by following this thread (using rails 4 and turbolinks)

http://stackoverflow.com/questions/17881384/jquery-gets-loaded-only-on-page-refresh-in-rails-4-application

[yuriytickets]

This is the way I did turbolinks, fullpage and scrolloverflow works as expected with Rails4 / Turbolinks5

$(document).on('turbolinks:load', function(){
    if (typeof $.fn.fullpage.destroy == 'function') { 
        $.fn.fullpage.destroy('all');
    }
    $('#fullpage').fullpage({
        //your options
    });
    $.fn.fullpage.reBuild();
}