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

Question

Currently I'm working on a website that is designed to run both 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.

Answer 1

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;
        };
 }