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.

Traceable

Whoa there, that's a lot of questions all at once. You'll have much better luck if you narrow it down and provide a link or self-contained example code for what you're currently doing. – Viceroy

Hey, no worries I'll narrow it down - I'm wondering how to disable skrollr's functionality when browser window hits mobile size (particularly <767px). – Traceable

Answer 1

Skrollr has its own mobile check function

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

Tribalism

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.

Sarad

Now I realize it's better and faster to use window.matchMedia instead of a window resize handler. There will be a slight difference because the scrollbar is included in the window width. – Sarad

For me skrollr.init().destroy(); caused a bug where the page would jump to the top when scrolling upwards on mobile. skrollr.destroy(); worked for me. – Herzog

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();

Gyronny

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).

Mundane

Answer 5

In some cases you just disable the transitions:

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

Illustrious

Not a great answer if you still need some CSS transforms on the element that aren't related to Skrollr. – Larimor

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

Suggest