How to disable jscrollpane for Ipad and Iphone

Question

I am using jscrollpane full page scrolling method http://jscrollpane.kelvinluck.com/fullpage_scroll.html. I want to disable it for Ipad and Iphone but keep for dekstop. Is there a way to remove jscrollpane for max-width 1024px.

Answer 1

You could use some javascript to detect the screen.width() and only call the jscrollpane.js function when the screen.size is above a certain threshold. You could use code similar to the below:

<script type="text/javascript" id="sourcecode">
if (screen.width > 960 ){           
$(function()
            {
                $('.scroll-pane').jScrollPane();
            });
}
</script>

Alternatively if you find the screen size to be unreliable or if you have trouble with portrait vs landscape etc, you could try looking try and find out if the device is an iphone/ipad based on the useragent.

something to the extend of the below:

      <script type="text/javascript" id="sourcecode">
      iphoneOrIpad = navigator.userAgent.toLowerCase().indexOf('apple-iphone') > -1;    
      if (!iphoneOrIpad){           
       $(function()
            {
                $('.scroll-pane').jScrollPane();
            });
       }
      </script>

But have a look at this list as there are quite a few options you need to look for:

http://www.enterpriseios.com/wiki/Complete_List_of_iOS_User_Agent_Strings

Also have a look at this:

Detecting the iPhone from jQuery