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.

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](http://sscce.org) for what you're currently doing. — Christian Ternus, Oct 28 '13 at 21:47
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). — Petef1n, Oct 28 '13 at 22:08

score 26 · Accepted Answer · answered Nov 18 '14 at 23:17

26

Skrollr has its own mobile check function

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

answered Nov 18 '14 at 23:17

fatlinesofcode

1,457
16
21

score 22 · Answer 2 · answered Jan 22 '14 at 04:57

22

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.

answered Jan 22 '14 at 04:57

user2301179

452
5
6

Now I realize it's better and faster to use [window.matchMedia](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries) instead of a window resize handler. There will be a slight difference because the scrollbar is included in the window width. – user2301179 Oct 25 '15 at 02:49
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. – BaronGrivet Feb 26 '19 at 02:05

score 5 · Answer 3 · answered Sep 11 '14 at 12:57

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

score 3 · Answer 4 · answered Mar 29 '16 at 00:20

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

score 2 · Answer 5 · answered Apr 09 '15 at 01:56

2

In some cases you just disable the transitions:

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

answered Apr 09 '15 at 01:56

chulian

2,507
3
19
22

Not a great answer if you still need some CSS transforms on the element that aren't related to Skrollr. – Michael Giovanni Pumo Jan 27 '16 at 11:05

score 1 · Answer 6 · answered Sep 28 '16 at 11:42

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

Disable Skrollr for mobile device ( <767px )

6 Answers6

Linked