Create a way to disable mobile

[stefsullrew]

Skrollr is really awesome. It would be even more awesome if there were a simple way to disable mobile. I'd rather not have the movement on mobile since I'm giving it a very different look. (If I've missed the way to do this, please point me in the right direction?)

Cheers

[lexuspro]

Please! The website does not scroll on mobile and tablets. Please help me how can I disable the script for these devices, I'm very bad at understanding the script. Now I have this:

skrollr.init({
    forceHeight: false
});

[stefsullrew]

If you want to get rid of it on mobile altogether, I found this:

if(!(/Android|iPhone|iPad|iPod|BlackBerry|Windows Phone/i).test(navigator.userAgent || navigator.vendor || window.opera)){
skrollr.init({
forceHeight: false
});
}

[rediris]

Here's an example of what I did to disable skrollr on anything less than 600px wide:

// DEBOUNCE FUNCTION via @http://davidwalsh.name/javascript-debounce-function
function debounce(a,b,c){var d;return function(){var e=this,f=arguments;clearTimeout(d),d=setTimeout(function(){d=null,c||a.apply(e,f)},b),c&&!d&&a.apply(e,f)}}

skrollrCheck = debounce(function() {
  var winWidth        = window.innerWidth;
  if(winWidth >= 600) {
    // Init Skrollr
    skrollr.init({
        forceHeight: false,//disable setting height on body
        mobileDeceleration:0.05,
        render: function(data) {
            //Debugging - Log the current scroll position.
            //console.log('data.curTop: ' + data.curTop);
        }
    });
    skrollr.get().refresh();
  } else {
    // Destroy skrollr for screens less than 600px
    skrollr.init().destroy();
  }
}, 250);

//Initialize skrollr, but only if it exists
if(typeof skrollr !== typeof undefined){
  // INITIALIZE
  window.onload = skrollrCheck();
  window.addEventListener('resize', skrollrCheck);
} else {
  console.log('skrollr is missing.');
}

You could probably incorporate @stefsullrew's suggestion instead of detecting window width.

[lexuspro]

Oh, thanks!!!

[lexuspro]

Damn! And yet I can't! Guys, please tell me how can I make it easier to create a javascript file and place the content or register in the body of the page?
At the moment I have in body html this code:

    skrollr.init({
        forceHeight: false,
        smoothScrolling: true,
        mobileCheck: function() {
          return (/Android|iPhone|iPad|iPod|BlackBerry/i).test(navigator.userAgent || navigator.vendor || window.opera);
          return false;
      }
    });

I want to do as posted @rediris , please!

[rediris]

If you put it directly in the HTML, did you wrap it in a script tag?

<script>
[your code]
</script>

[lexuspro]

Yes, I wrapped the code!

<script>
    skrollr.init({
        forceHeight: false,
        smoothScrolling: true,
        mobileCheck: function() {
          return (/Android|iPhone|iPad|iPod|BlackBerry/i).test(navigator.userAgent || navigator.vendor || window.opera);
          return false;
      }
    });
</script>

I do not think that it is difficult for you, help me please! I'll pay!

[prog13]

You can't have two returns in a single function.
You want to return false only if userAgent test is true, so invert first mobileCheck return and get rid of another one:

    skrollr.init({
        forceHeight: false,
        smoothScrolling: true,
        mobileCheck: function() {
          return !(/Android|iPhone|iPad|iPod|BlackBerry/i).test(navigator.userAgent || navigator.vendor || window.opera);
      }
    });

[rediris]

Here's a slightly different approach, which is to disable skrollr for any device under 600px. The desire was to disable skrollr on phones, but enable it on some tablets.

Also, since this checks to see if the "skrollr-body" ID exists on the body tag, this effectively prevents a scrolling bug that was happening in iOS 8 (where scrolling at the outer boundaries of the page [top and bottom] would trigger a scroll to the top of the page). This is not production-ready code, meaning, ditch the console.logs, etc and minify as necessary.

skrollrCheck = function() {
  var winWidth        = window.innerWidth;
  var winHeight       = window.innerHeight;

  if(winWidth >= 600) {
    if(document.body.id !== 'skrollr-body') {
      document.body.id = 'skrollr-body';
      // Init Skrollr
      skrollr.init({
          forceHeight: false,//disable setting height on body
          mobileDeceleration:0.04,
          smoothScrolling:true,
          render: function(data) {
              //Debugging - Log the current scroll position.
              //console.log('data.curTop: ' + data.curTop);
          }
      });
    }
    if(winWidth > winHeight) {
      console.log('orientation is landscape');
      skrollr.get().refresh();
    } else if (winWidth < winHeight) {
      console.log('orientation is portrait');
      skrollr.get().refresh();
    }
  } else if (winWidth < 600){
    // Destroy skrollr for screens less than 600px
    if(document.body.id === 'skrollr-body') {
      skrollr.init().destroy();
      document.body.id = '';
    }
  }
};

//Initialize skrollr, but only if it exists.
if(typeof skrollr !== typeof undefined){
  // INITIALIZE
  window.onload = skrollrCheck();
  window.addEventListener('resize', skrollrCheck);//listens for resize, and refreshes skrollr
  window.addEventListener('orientationchange', skrollrCheck);//listens for orientation change, and refreshes skrollr
  console.log('skrollr active!');
} else {
  console.log('skrollr is did not load.');
}

[BradMcGonigle]

@rediris I'm still seeing the iOS 8 scrolling bug (jumping back to the top of the page) even with setting and detecting an ID/class on body. Did that completely solve the issue for you?

My setup varies slightly in that I'm putting #skrollr-body on a div within the page and setting/detecting a unique class on body but I wouldn't thing that would change the result.

Actually it does make a difference having #skrollr-body not on the body tag. My reason for not putting it on the body is because I have elements that are position:fixed and was following @Prinzhorn recommendations here.

[rediris]

@BradMcGonigle, since you're not setting #skrollr-body on the body tag, you'd need to test the <div> instead of the <body>. To do this, it would make sense to have a (unique) class on that particular <div> as well.

You could try something like this (caveat: this is untested, and likely won't work in IE8):

// define variables
var myDiv = document.getElementsByClassName('myDiv');//should be a unique class

skrollrCheck = function() {
  var winWidth        = window.innerWidth;
  var winHeight       = window.innerHeight;

  if(winWidth >= 600) {
    if(myDiv.id !== 'skrollr-body') {// if myDiv doesn't have #skrollr-body
      myDiv.setAttribute('id', 'skrollr-body');// set ID of myDiv to #skrollr-body
      // Init Skrollr
      skrollr.init({
          forceHeight: false,//disable setting height on body
          mobileDeceleration:0.04,
          smoothScrolling:true,
          render: function(data) {
              //Debugging - Log the current scroll position.
              //console.log('data.curTop: ' + data.curTop);
          }
      });
    }
    if(winWidth > winHeight) {
      console.log('orientation is landscape');
      skrollr.get().refresh();
    } else if (winWidth < winHeight) {
      console.log('orientation is portrait');
      skrollr.get().refresh();
    }
  } else if (winWidth < 600){
    // Destroy skrollr for screens less than 600px
    if(myDiv.id === 'skrollr-body') {// if the screen is less than 600px and myDiv has #skrollr-body
      skrollr.init().destroy();
      myDiv.setAttribute('id', '');// remove #skrollr-body ID from myDiv
    }
  }
};

//Initialize skrollr, but only if it exists.
if(typeof skrollr !== typeof undefined){
  // INITIALIZE
  window.onload = skrollrCheck();
  window.addEventListener('resize', skrollrCheck);//listens for resize, and refreshes skrollr
  window.addEventListener('orientationchange', skrollrCheck);//listens for orientation change, and refreshes skrollr
  console.log('skrollr active!');
} else {
  console.log('skrollr is did not load.');
}

[acielouvert]

Hello,

I'm using Skrollr on body tag to have a nice parallax effect between the content and the fullscreen image background. "skrollr-body" id was added on body tag.

Unfortunatly, I have trouble on mobile. I would like to delete the effect for iOS ...
So I added the following script just before the closing body tag :

<script type="text/javascript">
if(!(/Android|iPhone|iPad|iPod|BlackBerry|Windows Phone/i).test(navigator.userAgent || navigator.vendor || window.opera)){
skrollr.init({
forceHeight: false
});
}
</script>

Skrollr effect is gone but I miss all the content on the homepage when viewing on Ipad, Iphone5 is OK.
The only way to get my content back is to delete "skrollr.min.js" from the js resource.

How can I really get rid of skrollr on mobile ?
Thanks

[ghost]

This is what I have developed that works very well in all cases ... there's even an option to input an additional css file that handles ONLY mobile devices and is removed when not a mobile device ... since some laptops and notebooks are quite small, yet work well with skrollr, there is no reason to disable on these ... I've set my dimension for this particular project at 1024px ... but use as you need ... there are several console.log() notes in here to help with debugging ...

* check for whether somethings exists ...
* yes this is overkill but does what is needed in several places 
*/

jQuery.fn.exists = function(){
    return this.length > 0;
}

/* START window.load */
$( window ).on('load', function () {
    /* check for an remove the mobile only css file - this gets injected later in resize */
    $( '#mobileonly' ).remove();
    /* set variable to check device window width */
    var currentWidth = $(window).width();

    /* we only want to initialize skrollr on anything over 1024 
    * TODO : do mobile device check instead to allow for screens 1024 to use this  */
    var mobiledevice = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    console.log(mobiledevice);
    if ( currentWidth > 1024 ) {
        var s = skrollr.init({
            forceHeight             : true,
            smoothScrolling         : true,
            smoothScrollingDuration : 1500,
            mobileCheck             : function() {
                return false;
            }
        });
        $('html').css({'overflow' : 'hidden'});
        $('#mobileonly').remove();
        console.log('#mobileonly has been removed');
    }
    else if ( currentWidth <= 1024 ) {
        skrollr.init().destroy();
        $('html').css({'overflow' : 'hidden'});
        $( '<link/>', {
            rel     : 'stylesheet',
            type    : 'text/css',
            href    : 'assets/css/mobileonly.css?v=1',
            id      : 'mobileonly'
        } ).appendTo('head');
        var is_chrome = window.chrome;
    }
    else {
        $('html').css({'overflow' : 'hidden'});
    }
});
/* END window.load */

/* START resize */
$(window).resize(function() {
    var winWidth = $(window).width();
    var conHeight = $(window).height();
    $("div#sidebar").css('background-color','#000').html("width: <em>" + winWidth + "<\/em><br>" + " height: <em>" + conHeight + "<\/em>");

    var currentWidth = $(window).width();
    if ( currentWidth > 1024 ) {
        $('#mobileonly').remove();
        console.log('#mobileonly has been removed');
        $('html').css({'overflow' : 'hidden'});
        var s = skrollr.init({
            forceHeight             : true,
            smoothScrolling         : true,
            smoothScrollingDuration : 1500,
            mobileCheck             : function() {
                return false;
            }
        });
    }
    else if ( currentWidth <= 1024 ) {
        $('html').css({'overflow' : 'hidden'});
        skrollr.init().destroy();
        if ( $('#mobileonly').exists() ) {
            console.log('I see the link #mobileonly');
            // Do something
        }
        else {
            $( '<link/>', {
                rel     : 'stylesheet',
                type    : 'text/css',
                href    : 'assets/css/mobileonly.css?v=1',
                id      : 'mobileonly'
            }).appendTo('head');
        }
    }
    else {
        $('html').css({'overflow' : 'hidden'});
    }
});
/* END resize */

In the code references a development controller which assist in scroll position and viewport width/height ... if you need that code to help you out, let me know ...

[verticalgrain]

If you're using Modernizr, here is fairly simple way to prevent skrollr from initializing on any device with a touch screen:

  if ( $('html').hasClass('no-touch') ) {
    skrollr.init({
    });
  }

I've found this works well in the real world, I've used this method on 5+ projects. Some might argue that this is preventing skrollr on tablets, but I'm usually ok with that.

[michaelpumo]

This is what I had to do; save a reference to Skrollr on the window (dirty, oh so dirty!):

JavaScript

// Test here to check if on desktop / large screens.
if ( $(window).width() > 1024 ) {

    // Save the instance of Skrollr to the Window.
    window.skrollrInstance = skrollr.init({
        forceHeight: false
    });

// If not on a large screen.
} else {

    //  If Skrollr is NOT undefined, let's do the work.
    if ( window.skrollrInstance !== undefined ) {
        // Use Skrollr's destroy() method on the instance.
        window.skrollrInstance.destroy();
        // Now set the variable to be completely undefined.
        window.skrollrInstance = undefined;
    }

}

You could wrap this whole block in a function and call it on resize of the window, as well as on DOM ready. That way you can flip between it working and not working.

I've confirmed that this works above and beyond just using destroy() and therefore by extension, eliminates the jumping iOS bug.