Skrollr cutting off the bottom of the page on mobile

Skrollr was preventing me from scrolling all the way down my page on mobile. I had put the id skrollr-body onto my body tag already so that was not the issue.

It turned out the issue was that skrollr was being initiated before two Flexsliders on my page. What I needed to do was to force Skrollr to only initiate after flexslider had set itself up.

I used the jQuery deferred method documented in this post.

Here is my final code. You will want to remove the console log messages once you have it working.

      var myFlexslider = function() {

        var r = $.Deferred();

          controlNav: false,
          directionNav: false,
          slideshowSpeed: 4000,

        console.log('Run flexslider');

        // This is my function to show the images only after the slider is initiated. You may not need this.
        console.log('Show promo slider');

        return r;


      var mySkrollr = function() {

        var s = skrollr.init({
          forceHeight: false

        skrollr.menu.init(s, {
            animate: true,
            easing: 'swing',
            duration: function(currentTop, targetTop) {
              return 1000;

        console.log('Initialise Skrollr');


      myFlexslider().done( mySkrollr() );

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s