Question

I’m trying to set the scroll with jQuery / JavaScript. I’m having trouble figuring out how to use the viewport for iOS and tablet PC’s. Any help will be appreciated. I need to use the $.Scroll for design / Animation purposes.

Thanks,

Here’s what I have so far:

  

    var isIphone = navigator.userAgent.match(/iPhone/i) != null;
    var isIpod = navigator.userAgent.match(/iPod/i) != null;
    var isIpad = navigator.userAgent.match(/iPad/i) != null;

    // now set one variable for all iOS devices
    // What do I do for Tablet PC's?

    var isIos = isIphone || isIpod || isIpad;

    jQuery(function ($) {
      $.Window = $(window); // We'll use this later on 
      $.Body = $('body');
      if ( !isIos ) {
        // Ternary for desktop
        $.Scroll = ($.browser.mozilla || $.browser.msie) ? $('html') : $.Body;
      } else {
        // Need to detect iOS and Tablet PC's
        $.Scroll = $.Body;
      }
    });

  

UPDATE:

Thanks, for the input so far!

I’ve figured out how to access the iOS touch event:

  

    $.Window
      .bind('touchmove',
        function (e) {
          //code goes here
      })
      .bind('scroll',
        function (e) {
          //code goes here
      })

  

This seems to work on both scroll and touch events.

Answer 1

iOS stops timers on scroll, so for the most part timer based animations are not going to work. My scrolling was good to go, it’s just that jQuery .animate does not work well with iOS Safari’s implementation of the scroll type.