Disable Skrollr for mobile device ( <767px )

Question

Firstly would like to thanks @prinzhorn for such an amazing and powerful library. My question: I have implemented a Skrollr parallax background to the header of my website but I would like to disable this feature when viewed on a mobile device, particularly iphones, etc. eg. (max-width: 767px).I was wondering what would be the best way to do this? And if the destroy() function was able to do this or I should be using another technique? Also, if destroy() is the answer, how could I implement this correctly? Many thanks and examples or demo's greatly appreciated.

Answer 1

Skrollr has its own mobile check function

var s = skrollr.init();
if (s.isMobile()) {
    s.destroy();
}

Answer 2

The destroy() method does do that. You can also avoid initializing skrollr on small windows to begin with, and/or destroy skrollr if the window gets resized to be small.

$(function () {
  // initialize skrollr if the window width is large enough
  if ($(window).width() > 767) {
    skrollr.init(yourOptions);
  }

  // disable skrollr if the window is resized below 768px wide
  $(window).on('resize', function () {
    if ($(window).width() <= 767) {
      skrollr.init().destroy(); // skrollr.init() returns the singleton created above
    }
  });
});

In this example, skrollr does not get re-enabled if the window gets resized to be large.

Answer 3

You can also use userAgent detection - so smaller desktop resolutions still get the parallax effect:

//function
$(function skrollrInit() {

    //initialize skrollr
    skrollr.init({
        smoothScrolling: false
    });

    // disable skrollr if using handheld device
    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
        skrollr.init().destroy();
    }

});

//execute function
skrollrInit();

Answer 4

The .destroy() method is the correct method to use; however, I would approach this differently than the accepted answer. Initializing the skrollr instance a second time to destroy it is unnecessary and performance can be improved using the .get() method, like so:

$(function () {
  // Init function
  function skrollrInit() {
    skrollr.init(yourOptions);
  }

  // If window width is large enough, initialize skrollr
  if ($(window).width() > 767) {
    skrollrInit();
  }

  // On resize, check window width, if too small
  // and skrollr instance exists, destroy;
  // Otherwise, if window is large enough
  // and skrollr instance does not exist, initialize skrollr.
  $(window).on('resize', function () {
    var _skrollr = skrollr.get(); // get() returns the skrollr instance or undefined
    var windowWidth = $(window).width();

    if ( windowWidth <= 767 && _skrollr !== undefined ) {
      _skrollr.destroy();
    } else if ( windowWidth > 767 && _skrollr === undefined ) {
      skrollrInit();
    }
  });
});

Skrollr never gets initialized a second time if it currently exists and is only destroyed if it exists. This avoids any bugs you may find by the brief moment between initializing and destroying (I speak from experience on this).

Answer 5

In some cases you just disable the transitions:

@media only screen and (max-width: 480px){
    .divWithSkrollr{
        transform: none !important;
    }
}

Answer 6

For me I wanted only some effects to be disabled on some mobile. I was using Bootstrap for responsiveness so some effects on desktop interfered when the columns collapsed on mobile.

My solution was to make a custom class on the effects I didn't want to work on mobile. disable-mobile-skroll and then remove the data attributes I was using before skrollr was being initialized.

if ($(window).width() < 768) {
    $('.disable-mobile-skroll').removeAttr('data-bottom-top').removeAttr('data-top');
};
// init Skrollr here