How to disable script when on mobile device

Question

I have a site that has a parallax scroll effect and it runs a skrollr.js script. This is the first mobile website, but I would like the script to not run on mobile devices because it will not allow scrolling. Does anyone know how I can prevent a script from running on a mobile device? Thanks.

The code into which the script is loaded is at the end of the body section. If any other code is needed, let me know.

<!-- SCRIPTS --> <script type="text/javascript" src="js/skrollr.js"></script> <script type="text/javascript"> skrollr.init(); </script> <!--/ SCRIPTS --> 

Answer 1

You can use modernizr touch detection to check if it is a touch device, and if so, do not run the script.

 if (Modernizr.touch) { } else { skrollr.init(); } 

or you can check the user agent (this may not be the best option, since the user agent is not always reliable), and write a simple, if otherwise, using skrollr init in else

  var isMobile = { Android: function () { return navigator.userAgent.match(/Android/i); }, BlackBerry: function () { return navigator.userAgent.match(/BlackBerry/i); }, iOS: function () { return navigator.userAgent.match(/iPhone|iPad|iPod/i); }, Opera: function () { return navigator.userAgent.match(/Opera Mini/i); }, Windows: function () { return navigator.userAgent.match(/IEMobile/i); }, any: function () { return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows()); } }; if (isMobile.any()) { } else { skrollr.init(); } 

Another testing method would be to check window.innerWidth and only initialize your script if the screen size is more than 760px:

 if (window.innerWidth > 760) { skrollr.init(); }