Is there a way to get a cross platform overflow:scroll

Currently I'm working on a website that is designed to run bo开发者_JAVA百科th on mobile devices and on regular computers. The problem that I'm facing is caused by the fact that I need to have a header and a footer with fixed positions.

The first thing that I tried, which seemed the most natural to me, was using position:fixed. It worked very well on my PC but it didn't work on my iphone (with ios4). So I googled it up a bit and found iScroll. iScroll is a JavaScript standalone script meant to solve this exact problem. The problem is that this solution breaks the feature on a non-mobile platform. I also looked at YUI ScrollView but again it was broken on a non-mobile platform.

Currently I solved it by using iScroll only when I detect a mobile browser. But I'm looking for a cleaner and better solution.

Note: iScroll4 doesn't support ie, which I also want to support.

Unfortunately there is no clean solution - you can try detecting "touch events" since those pretty much let you know when the user is going to need iScroll, and fire it up.

An easy way to detect touch events is the following,

    var $q = something...;
    try {
        document.createEvent("TouchEvent");
        $q.onmousedown = 'ontouchstart',
        $q.onmouseup = 'ontouchend',
        $q.onmousemove = 'ontouchmove';
        $q.touches = true; //used in other modules as well

        //position based on first-finger position
        $q.getPageX = function(e){
            return e.touches[0].pageX;
        };
        $q.getPageY = function(e){
            return e.touches[0].pageY;
        };

} catch (e) {
        //KEY BASED DEVICE
        $q.onmousedown = 'onmousedown',
        $q.onmouseup = 'onmouseup',
        $q.onmousemove = 'onmousemove';
        $q.touches = false;

        //grabbing the position based on Mouse position
        $q.getPageX = function(e){
            return e.clientX;
        };
        $q.getPageY = function(e){
            return e.clientY;
        };
 }