Question

I built a site that uses the $(window).scroll() jQuery event to programmatically animate in some elements. Since iOS doesn’t support this event in the same way, the experience sucks on an iPad.

How do detect the browser in Javascript so I can manage the experience in different browsers? Is this right approach?

Answer 1

You are asking the wrong question John. Browser detection and browser specific code is evil. It makes your project complex and hard to handle in the future. Read more about feature detection. There are also jQ plugins that help you minic iOS scrolls like this one

Easily like this you can add native scrolling:

    var scrollContent,
    scrollNav;

function loaded() {
    scrollContent = new iScroll('contentWrapper');
    scrollNav = new iScroll('navWrapper');
}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

document.addEventListener('DOMContentLoaded', loaded, false);